CV Generator JS

cv-generator-js.markdown

CV Generator JS

A Pen by HARUN PEHLİVAN on CodePen.

License.

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')

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: ', 'andresgqjob@gmail.com');
        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 = "";
}

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%