From 2d4e42ba7f487a0a5e5e2c1ee684582bd31ae126 Mon Sep 17 00:00:00 2001 From: Fabrizio112 Date: Sun, 26 Feb 2023 12:18:50 -0300 Subject: [PATCH 1/2] Finaliza Tarea Clase 7 Se finaliza la tarea de la clase 7 realizando las funciones correspondientes para la validacion de la Ciudad y de los Regalos Se realizaron las pruebas correspondientes a cada funcion --- index.html | 186 ++++++++++++++++++++++++----------------------- js/main-fabri.js | 31 ++++++++ js/pruebas.js | 47 +++++++++--- 3 files changed, 164 insertions(+), 100 deletions(-) create mode 100644 js/main-fabri.js diff --git a/index.html b/index.html index 75772b2a..fc854318 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,9 @@ + + charset="UTF-8"> Carta a Papá Noel @@ -12,101 +13,108 @@ -
- -
+
+ +
-
- 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..e31fd701 --- /dev/null +++ b/js/main-fabri.js @@ -0,0 +1,31 @@ +const $form = document.querySelector(`#carta-a-santa`); + +let nombreDelUsuario = $form.nombre.value; +let ciudadDelUsuario = $form.name.value; +let comportamientoDelUsaurio = $form.comportamiento.value; +let regaloDelUsario = $form["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`; + } + 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` + } + return ""; +} \ No newline at end of file diff --git a/js/pruebas.js b/js/pruebas.js index 9cbb4229..f2e718f5 100644 --- a/js/pruebas.js +++ b/js/pruebas.js @@ -1,15 +1,40 @@ 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("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("Un futbol") === ``, + `Validar Regalo no valido que se ingreso un regalo valido` + ) } probarValidarNombre(); +probarValidarCiudad(); +probarValidarRegalo(); \ No newline at end of file From 67b7d56660fc5f644b8f99fde56fa0c79f6924c3 Mon Sep 17 00:00:00 2001 From: Fabrizio112 Date: Tue, 28 Feb 2023 15:34:19 -0300 Subject: [PATCH 2/2] Finaliza tarea de la clase 8 Se finaliza la tarea de la clase 8 la cual consistia en lograr que al momento de apretar el boton de enviar carta , no se repitieran y acumularan los errores,ademas de mostrar el cartel del envio exitoso y redirigir a la siguiente pagina NOTA: Estas 2 ultimas clases fueron hasta ahora las mas complicadas hasta la fecha jejeje, pero se pudieron superar --- index.html | 9 ++++-- js/main-fabri.js | 80 +++++++++++++++++++++++++++++++++++++++++++----- js/pruebas.js | 10 +++++- wishlist.html | 25 ++++++++++----- 4 files changed, 106 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index fc854318..baa5a52b 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,11 @@ + @@ -28,7 +33,7 @@

Carta a santa

Querido Santa,

Mi nombre es y vivo en - @@ -63,7 +68,7 @@

Carta a santa

Este año realmente me gustaría recibir

- +

    diff --git a/js/main-fabri.js b/js/main-fabri.js index e31fd701..04681cca 100644 --- a/js/main-fabri.js +++ b/js/main-fabri.js @@ -1,9 +1,7 @@ -const $form = document.querySelector(`#carta-a-santa`); - -let nombreDelUsuario = $form.nombre.value; -let ciudadDelUsuario = $form.name.value; -let comportamientoDelUsaurio = $form.comportamiento.value; -let regaloDelUsario = $form["descripcion-regalo"].value; +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) { @@ -13,19 +11,85 @@ function validarNombre(nombreDelUsuario) { 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 `Este campo no puede estar vacio`; } return ""; } function validarRegalo(regaloDelUsario) { if (regaloDelUsario.length == 0) { - return `Este campo no puede estar vacio` + 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 f2e718f5..0fe77cad 100644 --- a/js/pruebas.js +++ b/js/pruebas.js @@ -9,6 +9,10 @@ function probarValidarNombre() { '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` @@ -30,7 +34,11 @@ function probarValidarRegalo() { `Validar Regalo no valido si el campo esta vacio` ) console.assert( - validarRegalo("Un futbol") === ``, + 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` ) } 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