Skip to content

Instantly share code, notes, and snippets.

@harunpehlivan

harunpehlivan/cv-generator-js.markdown

Created December 20, 2022 00:39
Show Gist options
  • Save harunpehlivan/6b382f98c84d5fe51f911dc24eb199e9 to your computer and use it in GitHub Desktop.
Save harunpehlivan/6b382f98c84d5fe51f911dc24eb199e9 to your computer and use it in GitHub Desktop.
Download ZIP
CV Generator JS
Raw
index.pug
html(lang='es')
head
meta(charset='UTF-8')
title UF2 Formulario JS
body
input.btn-gen(type='button', value='Generar CV', name='Generar CV', onclick='pedirDatos(this)')
form.form(action='maneja_formulario.php', method='get')
h1 CURRICULUM VITAE
fieldset
legend DATOS PERSONALES
|
label(for='title') Título
|
select#status(name='title')
option(value='', selected='selected') - selecciona -
option(value='señor') Sr.
option(value='señora') Sra.
|
label.input(for='name') Nombre
|
input#input1(type='text', name='nombre', size='8', minlength='3', maxlength='10', pattern='[A-Za-z]{3,10}', placeholder='', onkeyup='validaNombre(this)', title='Introduce entre 3 y 10 letras', required='')
|
label.input(for='sName') Apellidos
|
input#input2(type='text', name='apellidos', size='8', maxlength='15', placeholder='', onkeyup='validaApellido(this)', title='Introduce entre 3 y 15 letras', required='')
|
label.input(for='dni') DNI
|
input#input3(type='text', name='dni', size='9', maxlength='9', placeholder='', onkeyup='validaNif(this)', title='Introduce 8 números y una letra', required='')
|
label.input(for='street') Dirección
|
input#input4(type='text', name='calle', size='25', minlength='15', maxlength='25', placeholder='', onkeyup='validaDir(this)', required='')
|
label.input(for='phone') Teléfono
|
input#input5(type='text', name='telefono', size='9', maxlength='9', pattern='[0-9]{9}', placeholder='', onkeyup='validaTel(this)', title='Número de 9 cifras', required='')
|
label.input(for='email') Correo electrónico
|
input#input6(type='text', name='email', placeholder='', onkeyup='validaMail(this)', required='')
|
label.input(for='birthday') Fecha de nacimiento
|
input#datepicker(type='date', name='birthday', size='8', maxlength='8', placeholder='', onkeyup='validarCampo(this)', required='')
|
label(for='status') Estado civil
|
select#input7(name='status')
option(value='', selected='selected') - selecciona -
option(value='married') Casado/a
option(value='single') Soltero/a
fieldset
legend EXPERIENCIA
|
input.btn(type='button', value='Añade experiencia', onclick='insertarExp()')
#expInput
fieldset
legend IDIOMAS
|
input.btn(type='button', value='Añade idiomas', onclick='insertarLang()')
#langInput
fieldset
legend AFICIONES
|
input.btn(type='button', value='Añade pasatiempos', onclick='insertarHobb()')
#hobbInput
fieldset
legend ENLACES DE INTERÉS
|
input.btn(type='button', value='Añade enlaces de interés', onclick='insertarLink()')
#linkInput
footer
input#enviar.btn-submit(type='submit', value='Generar CV', name='Generar CV', onclick='print()')
|
input#borrar.btn-submit(type='reset', value='Borrar CV')
Raw
script.js
/*
* @author: Andres Garcia
* @versio: 1.0
* @description: this script controls and validate the form and finally post the data fields to the server.
* @date: 2014/09/30
*
*/
/*
* @name: loadPage
* @author: Andrés Garcia
* @versio: 1.0
* @description: function to load some html content in index.html
* @date: 31/03/2017
* @params: none
* @return: none
*
*/
window.onload = iniciar; //Sin paréntesis
function iniciar() {
document.getElementById("enviar").addEventListener('click', validar, false);
}
/*
* @name: dataCapture
* @author: Andrés Garcia
* @versio: 1.0
* @description: funcion para pedir datos al usario
* @date: 31/03/2017
* @params: none
* @return: none
*
*/
function pedirDatos(mostrar) {
do {
var name = prompt('Introducir Nombre: ', 'Andres');
var check1 = checkName(name);
document.getElementById("input1").value = name;
} while (check1 === false);
do {
var sName = prompt('Introducir Apellidos: ', 'García Quina');
var check2 = checksName(sName);
document.getElementById("input2").value = sName;
} while (check2 === false);
do {
var dni = prompt('Introducir dni: ', '47601469W');
var check3 = checkDni(dni);
document.getElementById("input3").value = dni;
} while (check3 === false);
do {
var street = prompt('Introducir dirección: ', 'c/ San Silvestre, 28');
var check4 = checkStreet(street);
document.getElementById("input4").value = street;
} while (check4 === false);
do {
var phone = parseInt(prompt('Introducir mobil: ', '639530853'));
var check5 = checkPhone(phone);
document.getElementById("input5").value = phone;
} while (check5 === false);
do {
var email = prompt('Introducir mail: ', '[email protected]');
var check6 = checkMail(email);
document.getElementById("input6").value = email;
} while (check6 === false);
document.getElementsByTagName("form")[0].style.display = "inline";
mostrar.style.display = "none";
}
/*
* @name: check&validate
* @author: Andrés Garcia
* @versio: 1.0
* @description: funciones de validación de campos en prompt
* @date: 31/03/2017
* @params: none
* @return: none
*
*/
//Comprobar Nombre
function checkName(elemento) {
if (elemento === null || elemento.length === 0 || /^\s+$/.test(elemento) || elemento.length < 3) {
alert('Campo de texto incorrecto');
return false;
}
}
//Comprobar Apellidos
function checksName(elemento) {
if (elemento === null || elemento.length === 0 || /^\s+$/.test(elemento) || elemento.length < 3) {
alert('Campo de texto incorrecto');
return false;
}
}
//Comprobar DNI
function checkDni(elemento) {
if (elemento === null || elemento.length === 0 || !(/^[0-9]{8}[A-Z]$/.test(elemento))) {
alert('Campo de texto incorrecto');
return false;
}
}
//Comprobar dirección
function checkStreet(elemento) {
if (elemento === null || elemento.length === 0 || /^\s+$/.test(elemento) || elemento.length < 3) {
alert('Campo de texto incorrecto');
return false;
}
}
//Comprobar telefono
function checkPhone(elemento) {
if (isNaN(elemento) || !(/^\d{9}$/.test(elemento)) || elemento === null || elemento.length === 0 || elemento.length <= 9) {
alert('Campo numérico incorrecto');
return false;
}
}
//Comprobar email
function checkMail(elemento) {
if (/^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/.test(elemento) || elemento === null || elemento.length === 0) {
alert('Campo de texto incorrecto');
return false;
}
}
/*
* @name: check&validate
* @author: Andrés Garcia
* @versio: 1.0
* @description: funciones de validación de campos del formulario
* @date: 31/03/2017
* @params: none
* @return: none
*
*/
function validaNombre(elemento) {
var dato = elemento.value;
if (!isNaN(dato) || dato === null || dato.length === 0 || dato.length < 3 || /^\s+$/.test(dato)) {
elemento.className += " incorrect";
document.getElementById("input1").placeholder = "El campo es erroneo";
document.getElementById("input1").className = "incorrect";
} else {
elemento.className += " correct";
document.getElementById("input1").placeholder = "El campo es erroneo";
document.getElementById("input1").className = "correct";
}
}
function validaApellido(elemento) {
var dato = elemento.value;
if (!isNaN(dato) || dato === null || dato.length === 0 || dato.length < 3 || /^\s+$/.test(dato)) {
elemento.className += " incorrect";
document.getElementById("input2").placeholder = "El campo es erroneo";
document.getElementById("input2").className = "incorrect";
} else {
elemento.className += " correct";
document.getElementById("input2").placeholder = "El campo es erroneo";
document.getElementById("input2").className = "correct";
}
}
function validaNif(elemento) {
var dato = elemento.value;
if (dato.length === 0 || !(/^[0-9]{8}[A-Z]$/.test(dato))) {
elemento.className += " incorrect";
document.getElementById("input3").placeholder = "El campo es erroneo";
document.getElementById("input3").className = "incorrect";
} else {
elemento.className += " correct";
document.getElementById("input3").placeholder = "El campo es erroneo";
document.getElementById("input3").className = "correct";
}
}
function validaDir(elemento) {
var dato = elemento.value;
if (!isNaN(dato) || dato === null || dato.length === 0 || dato.length < 3 || /^\s+$/.test(dato)) {
elemento.className += " incorrect";
document.getElementById("input4").placeholder = "El campo es erroneo";
document.getElementById("input4").className = "incorrect";
} else {
elemento.className += " correct";
document.getElementById("input4").placeholder = "El campo es erroneo";
document.getElementById("input4").className = "correct";
}
}
function validaTel(elemento) {
var dato = elemento.value;
if (isNaN(dato) || dato.length === 0 || !(/^\d{9}$/.test(dato))) {
elemento.className += " incorrect";
document.getElementById("input5").placeholder = "El campo es erroneo";
document.getElementById("input5").className = "incorrect";
} else {
elemento.className += " correct";
document.getElementById("input5").placeholder = "El campo es erroneo";
document.getElementById("input5").className = "correct";
}
}
function validaMail(elemento) {
var dato = elemento.value;
if (/^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/.test(dato) || dato.length === 0) {
elemento.className += " incorrect";
document.getElementById("input6").placeholder = "El campo es erroneo";
document.getElementById("input6").className = "incorrect";
} else {
elemento.className += " correct";
document.getElementById("input6").placeholder = "El campo es erroneo";
document.getElementById("input6").className = "correct";
}
}
/*
* @name: addFields
* @author: Andrés Garcia
* @versio: 1.0
* @description: funciones para añadir campos nuevos
* @date: 31/03/2017
* @params: none
* @return: none
*
*/
function insertarExp() {
var totalInputs = parseInt(prompt("Añadir numero de campos: "));
if (totalInputs) {
var confirmar = confirm('¿Seguro que quieres añadir ' + totalInputs + '?');
if (confirmar) {
var inputContent = "";
for (var i = 0; i < totalInputs; i++) {
inputContent += "<div class='addFields'>";
inputContent += "<label>Puesto</label><input id='puesto' type='text' placeholder='' onkeyup='validaNombre(this)'>";
inputContent += "<label>Empresa</label><input id='empresa' type='text' placeholder='' onkeyup='validaNombre(this)'>";
inputContent += '<select><option value="" selected="selected">- selecciona -</option><option value="unany">Menos de 1 año</option><option value="tresanys">Más de 3 años</option><option value="cincanys">Más de 5 años</option></select>';
inputContent += "</div>";
}
document.getElementById("expInput").innerHTML = inputContent;
} else {
alert('Introduce un número, por favor');
}
} else {
alert('No has introducido un número');
}
}
function insertarLang() {
var totalInputs = parseInt(prompt("Añadir numero de campos: "));
if (totalInputs) {
var confirmar = confirm('¿Seguro que quieres añadir ' + totalInputs + '?');
if (confirmar) {
var inputContent = "";
for (var i = 0; i < totalInputs; i++) {
inputContent += "<div class='addFields'>";
inputContent += "<label>Idioma</label><input id='idioma' type='text' placeholder='' onkeyup='validaNombre(this)'>";
inputContent += '<select><option value="" selected="selected">- selecciona -</option><option value="basic">Básico</option><option value="intermediate">Intermedio</option><option value="advanced">Avanzado</option></select>';
inputContent += "</div>";
}
document.getElementById("langInput").innerHTML = inputContent;
} else {
alert('Introduce un número, por favor');
}
} else {
alert('No has introducido un número');
}
}
function insertarHobb() {
var totalInputs = parseInt(prompt("Añadir numero de campos: "));
if (totalInputs) {
var confirmar = confirm('¿Seguro que quieres añadir ' + totalInputs + '?');
if (confirmar) {
var inputContent = "";
for (var i = 0; i < totalInputs; i++) {
inputContent += "<div class='addFields'>";
inputContent += "<label>Pasatiempo</label><input id='aficion' type='text' placeholder='' onkeyup='validaNombre(this)'>";
inputContent += "</div>";
}
document.getElementById("hobbInput").innerHTML = inputContent;
} else {
alert('Introduce un número, por favor');
}
} else {
alert('No has introducido un número');
}
}
function insertarLink() {
var totalInputs = parseInt(prompt("Añadir numero de campos: "));
if (totalInputs) {
var confirmar = confirm('¿Seguro que quieres añadir ' + totalInputs + '?');
if (confirmar) {
var inputContent = "";
for (var i = 0; i < totalInputs; i++) {
inputContent += "<div class='addFields'>";
inputContent += "<a href='www.youtube.com'>www.youtube.com</a>";
inputContent += "</div>";
}
document.getElementById("linkInput").innerHTML = inputContent;
} else {
alert('Introduce un número, por favor');
}
} else {
alert('No has introducido un número');
}
}
/*
* @name: finalCheck&validate
* @author: Andrés Garcia
* @versio: 1.0
* @description: funciones para comprobación final y envio de datos
* @date: 31/03/2017
* @params: none
* @return: none
*
*/
function validar(e) {
if (validaNombre() && validaApellido() && validaNif() && validaDir() && validaTel() &&validaMail() && confirm("Pulsa aceptar si deseas enviar el formulario")) {
return true;
} else {
e.preventDefault();
return false;
}
}
function limpiarError(elemento) {
elemento.className = "";
}
Raw
style.sass
*
box-sizing: border-box
outline: 0
body
background-color: #6e99c9
background-image: url("https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1638301858/responsivecomingsoon_ed5wod.png")
/*background-size: 100vw 100vh;
background-attachment: fixed
display: flex
min-height: 100vh
margin: 0
color: gray
font-family: 'Roboto', Verdana, Arial, sans-serif
h1
text-align: center
color: gray
text-shadow: 3px
font-size: 24px
margin: 7px auto
padding: 0
.btn-gen
width: 150px
height: 50px
margin: 10px
padding: 3px
border: 1px solid gray
border-radius: 3px
&:hover
opacity: 1
&:active
transform: scale(0.95)
form
display: none
.form
width: 600px
max-width: 100%
margin: auto
/*width: 50%;
/*max-width: 550px;
background: #F3F3F3
padding: 30px
border: 1px solid rgba(0, 0, 0, 0.2)
box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.2)
.btn
background: linear-gradient(#FFDA63, #FFB940)
border: 0
color: brown
opacity: 0.8
cursor: pointer
border-radius: 3px
margin-bottom: 0
&:hover
opacity: 1
&:active
transform: scale(0.95)
fieldset
border: 1px solid darkgray
border-radius: 3px
margin-bottom: 5px
label, select
display: block
margin: 5px 0
input
&[type=text]
display: block
padding: 10px
width: 100%
margin: 7px 0
font-size: 20px
border: 1px solid darkgray
.error, .incorrect
border: solid 1px red
color: red
.correct
border: solid 1px green
color: green
.addFields
width: 100%
margin: 20px auto
input
display: block
outline: 0
.btn-submit
display: inline
width: 49%
border: 1px solid gray
border-radius: 3px
&:hover
opacity: 1
&:active
transform: scale(0.95)
footer
display: flex
justify-content: space-around
width: 100%
margin: 0 auto
padding: 0
/*** MEDIA QUERIES **
@media screen and (max-width: 768px)
form
width: 75%
@media screen and (max-width: 480px)
form
width: 95%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment