diff --git a/index.html b/index.html index 75772b2a..baa5a52b 100644 --- a/index.html +++ b/index.html @@ -1,112 +1,125 @@ + + charset="UTF-8"> Carta a Papá Noel + -
- -
+
+ +
-
- Imagen de un regalo -
-

Querido Santa,

-

Mi nombre es y vivo en - . -

+
+ Imagen de un regalo + +

Querido Santa,

+

Mi nombre es y vivo en + . +

-

Creo que este año he sido - Muy bueno - Bueno - Mas o menos.

-

Este año realmente me gustaría recibir

-

- -

+

Creo que este año he sido + Muy bueno + Bueno + Mas o menos. +

+

Este año realmente me gustaría recibir

+

+ +

-
    -
+
    +
-

- -

- +

+ +

+ -
- Tu envío fue exitoso! -
+
+ Tu envío fue exitoso! +
- -
+ +
- + - - + + - + \ No newline at end of file diff --git a/js/main-fabri.js b/js/main-fabri.js new file mode 100644 index 00000000..04681cca --- /dev/null +++ b/js/main-fabri.js @@ -0,0 +1,95 @@ +const $formulario = document.querySelector("#carta-santa"); +let nombreDelUsuario = document.querySelector("#nombre").value; +let ciudadDelUsuario = document.querySelector("#ciudad").value; +let regaloDelUsario = document.querySelector("#descripcion-regalo").value; + + +function validarNombre(nombreDelUsuario) { + if (nombreDelUsuario.length == 0) { + return `Este campo debe tener al menos 1 caracter`; + } + if (nombreDelUsuario.length >= 50) { + return `Este campo debe tener menos de 50 caracteres`; + } + if (!/^[a-z]+$/i.test(nombreDelUsuario)) { + return `El campo nombre solo deberia recibir letras`; + } + return ""; +} + +function validarCiudad(ciudadDelUsuario) { + if (ciudadDelUsuario == "") { + return `Este campo no puede estar vacio`; + } + return ""; +} + +function validarRegalo(regaloDelUsario) { + if (regaloDelUsario.length == 0) { + return `Este campo no puede estar vacio`; + } + if (!/^[A-z0-9]+$/.test(regaloDelUsario)) { + return `Este campo solo puede contener letras y numeros`; + } + return ""; +} + +function validarFormulario(event) { + const $form = document.querySelector(`#carta-a-santa`); + const nombreDelUsuario = $form.nombre.value; + const ciudadDelUsuario = $form.ciudad.value; + const regaloDelUsario = $form["descripcion-regalo"].value; + const errorNombre = validarNombre(nombreDelUsuario); + const errorCiudad = validarCiudad(ciudadDelUsuario); + const errorRegalo = validarRegalo(regaloDelUsario); + + const errores = { + "descripcion-regalo": errorRegalo, + nombre: errorNombre, + ciudad: errorCiudad, + } + const exito = manejarErrores(errores) === 0; + if (exito) { + document.querySelector("#exito").className = ""; + $form.className = "oculto"; + setTimeout(() => { + window.location.href = "file:///C:/Users/54351/Documents/GitHub/js-xmas-edition/wishlist.html"; + }, 5000); + } + + event.preventDefault(); +} + + +function manejarErrores(errores) { + borrarMensajesDeError(); + const keys = Object.keys(errores); + let contadorErrores = 0; + keys.forEach(function (key) { + const error = errores[key]; + const $contenedorDescripcionDeErrores = document.querySelector("#errores"); + if (error) { + $form[key].className = "error"; + contadorErrores++; + let elementoLiDelError = document.createElement("li"); + elementoLiDelError.textContent = error; + elementoLiDelError.className = "hola"; + $contenedorDescripcionDeErrores.appendChild(elementoLiDelError); + } else { + $form[key].className = ""; + } + + }); + return contadorErrores; +} + + + +const $form = document.querySelector(`#carta-a-santa`); +$form.onsubmit = validarFormulario; + +function borrarMensajesDeError() { + document.querySelectorAll(".hola").forEach(function (a) { + a.remove(); + }) +} \ No newline at end of file diff --git a/js/pruebas.js b/js/pruebas.js index 9cbb4229..0fe77cad 100644 --- a/js/pruebas.js +++ b/js/pruebas.js @@ -1,15 +1,48 @@ function probarValidarNombre() { - console.assert( - validarNombre('') === 'Este campo debe tener al menos 1 caracter', - 'Validar nombre no validó que el nombre no sea vacío', - ); - - console.assert( - validarNombre( - '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111') === - 'Este campo debe tener menos de 50 caracteres', - 'Validar nombre no validó que el nombre sea menor a 50 caracteres', - ); + console.assert( + validarNombre('') === 'Este campo debe tener al menos 1 caracter', + 'Validar nombre no validó que el nombre no sea vacío', + ); + console.assert( + validarNombre( + '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111') === + 'Este campo debe tener menos de 50 caracteres', + 'Validar nombre no validó que el nombre sea menor a 50 caracteres', + ); + console.assert( + validarNombre("jose324") === `El campo nombre solo deberia recibir letras`, + `Validar nombre no valido que solo se pueden ingresar letras ` + ) + console.assert( + validarNombre("Fabrizio") === "", + `Validar nombre no valido que esta es una entrada valida` + ) +} +function probarValidarCiudad() { + console.assert( + validarCiudad("") === `Este campo no puede estar vacio`, + `Validar ciudad no valido si el campo esta vacio` + ) + console.assert( + validarCiudad("Cordoba") === ``, + `Validar ciudad no valida que se ingreso una ciudad valida` + ) +} +function probarValidarRegalo() { + console.assert( + validarRegalo("") === `Este campo no puede estar vacio`, + `Validar Regalo no valido si el campo esta vacio` + ) + console.assert( + validarRegalo("Hola papa noel ,,,,....") === `Este campo solo puede contener letras y numeros`, + `Validar regalo no valido que solo puede contener letras y numeros` + ) + console.assert( + validarRegalo("futbol") === ``, + `Validar Regalo no valido que se ingreso un regalo valido` + ) } probarValidarNombre(); +probarValidarCiudad(); +probarValidarRegalo(); \ No newline at end of file diff --git a/wishlist.html b/wishlist.html index e54a1f93..579f7b0f 100644 --- a/wishlist.html +++ b/wishlist.html @@ -1,5 +1,6 @@ + Wish List @@ -12,7 +13,9 @@
@@ -33,14 +36,17 @@

List of Wishes

- + + - + + \ No newline at end of file