A Pen by HARUN PEHLİVAN on CodePen.
Created
December 20, 2022 00:39
-
-
Save harunpehlivan/6b382f98c84d5fe51f911dc24eb199e9 to your computer and use it in GitHub Desktop.
CV Generator JS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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') |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * @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 = ""; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * | |
| 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
I'm partly the author of the original project created on Codepen in 2017 as a practice, and I just wanted to ask if you'd be so kind as to replace my real information with fake info, especially regarding my sensitive data:
This is because I didn't submit an abuse report to Github.
Thank you very much, and good luck.