diff --git a/index.html b/index.html index 837209c2..9f25d7b8 100644 --- a/index.html +++ b/index.html @@ -110,9 +110,9 @@

Carta a santa

- + - + diff --git a/tarea/clase 8/tarea 1/index.html b/tarea/clase 8/tarea 1/index.html new file mode 100644 index 00000000..315a440f --- /dev/null +++ b/tarea/clase 8/tarea 1/index.html @@ -0,0 +1,116 @@ + + + + + + Carta a Papá Noel + + + + + + + + +
+ +
+ +
+ 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

+

+ +

+ + + +

+ +

+
+ +
+ Tu envío fue exitoso! +
+ + +
+ + + + + + + diff --git a/tarea/clase 8/tarea 1/main.js b/tarea/clase 8/tarea 1/main.js new file mode 100644 index 00000000..37f595d0 --- /dev/null +++ b/tarea/clase 8/tarea 1/main.js @@ -0,0 +1,116 @@ +/* +Tarea 1: - fixear bug de errores que se agregan infinitamente + - redireccionar al usuario cuando no haya errores al hacer submit del form +*/ + + +const $form = document.querySelector("#carta-a-santa"); +$form.onsubmit = validarFormulario; + +function validarFormulario(event) { + const $form = document.formulario; + + const nombre = $form.nombre.value; + const ciudad = $form.ciudad.value; + const descripcionRegalo = $form["descripcion-regalo"].value; + + const errorNombre = validarNombre(nombre); + const errorCiudad = validarCiudad(ciudad); + const errorDescripcionRegalo = validarDescripcionRegalo(descripcionRegalo); + + const errores = { + nombre: errorNombre, + ciudad: errorCiudad, + "descripcion-regalo": errorDescripcionRegalo + }; + + const esExito = manejarErrores(errores) === 0; + + if (esExito) { + $form.className = "oculto"; + document.querySelector("#exito").className = ""; + setTimeout(redirigirUsuario, 5000); + } + + event.preventDefault(); +} + +function redirigirUsuario() { + window.location.href = "wishlist.html"; +} + +function manejarErrores(errores) { + const keys = Object.keys(errores); + const $errores = document.querySelector("#errores"); + let contadorErrores = 0; + + borrarErrores(); + + keys.forEach(function (key) { + const error = errores[key]; + const $error = document.createElement("li"); + + if (error) { + agregarError(error); + contadorErrores++; + + $form[key].className = "error"; + } else { + $form[key].className = ""; + } + }); + + return contadorErrores; +} + +function agregarError(error) { + const $errores = document.querySelector("#errores"); + const $error = document.createElement("li"); + + $error.textContent = error; + $errores.appendChild($error); +} + +function borrarErrores() { + document.querySelector("#errores").innerHTML = ""; +} + +function validarNombre(nombre) { + if (nombre.length === 0) { + return "Este campo debe tener al menos 1 caracter"; + } + + if (nombre.length >= 50) { + return "Este campo debe tener menos de 50 caracteres"; + } + + if (!/^[a-z]+$/i.test(nombre)) { + return "Este campo sólo acepta letras"; + } + + return ""; +} + +function validarCiudad(ciudad) { + if (ciudad.length === 0) { + return "La ciudad no puede estar vacía"; + } + + return ""; +} + +function validarDescripcionRegalo(descripcionRegalo) { + if (descripcionRegalo.length >= 100) { + return "La descripción no puede tener más de 100 caracteres"; + } + + if (descripcionRegalo.length === 0) { + return "La descripción no puede estar vacía"; + } + + if (!/^[a-z0-9]+$/i.test(descripcionRegalo)) { + return "La descripción sólo puede tener números y letras"; + } + + return ""; +} diff --git a/tarea/clase 8/tarea 2/tarea-clase-8.js b/tarea/clase 8/tarea 2/tarea-clase-8.js new file mode 100644 index 00000000..44bf4072 --- /dev/null +++ b/tarea/clase 8/tarea 2/tarea-clase-8.js @@ -0,0 +1,55 @@ +/*# Tarea clase 8 + +A las 2 tareas de la clase 6, ponerles las validaciones que consideren +necesarias. + +TIP: Las edades no pueden tener decimales. +*/ + +function validarIntegrantesIngresados(integrantesIngresados) { + const INTEGRANTES_MAXIMOS = 99; + + if (integrantesIngresados <= 0) { + return "La cantidad de integrantes ingresados debe ser mayor que 0"; + } + + if (!/^[0-9]+$/.test(integrantesIngresados)) { + return "La cantidad de integrantes ingresados debe ser un numero válido"; + } + + if (integrantesIngresados > INTEGRANTES_MAXIMOS) { + return "La cantidad de integrantes ingresados no debe ser mayor a " + INTEGRANTES_MAXIMOS; + } + + return ""; +} + +function validarEdad(edad) { + const EDAD_MAXIMA = 199; + + if (edad <= 0) { + return "La edad debe ser mayor que 0"; + } + + if (!/^[0-9]+$/.test(edad)) { + return "La edad debe ser un número válido"; + } + + if (edad >= EDAD_MAXIMA) { + return "La edad no puede ser mayor que " + EDAD_MAXIMA; + } + + return ""; +} + +function validarSalario(salario) { + if (salario <= 0) { + return "El salario debe ser mayor que 0"; + } + + if (!/^[0-9]+$/.test(edad)) { + return "El salario debe ser un monto válido"; + } + + return ""; +} diff --git a/tarea/tarea-clase-8.js b/tarea/tarea-clase-8.js deleted file mode 100644 index 1b57194d..00000000 --- a/tarea/tarea-clase-8.js +++ /dev/null @@ -1,7 +0,0 @@ -/*# Tarea clase 8 - -A las 2 tareas de la clase 6, ponerles las validaciones que consideren -necesarias. - -TIP: Las edades no pueden tener decimales. -*/