MalconH · MalconH · Sep 1, 2023 · Sep 4, 2023 · Sep 4, 2023
diff --git a/index.html b/index.html
@@ -110,9 +110,9 @@ <h1>Carta a santa</h1>
     </ul>
   </footer>
 
-  <script src="js/main-mio.js"></script>
+  <script src="js/main.js"></script>
   <script src="tarea/tarea-clase-7.js"></script>
-  <script src="js/pruebas-mio.js"></script>
+  <script src="js/pruebas.js"></script>
 </body>
 
 </html>
diff --git a/tarea/clase 8/tarea 1/index.html b/tarea/clase 8/tarea 1/index.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
+    charset="UTF-8">
+  <title>Carta a Papá Noel</title>
+
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700,900" rel="stylesheet">
+  <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="css/index.css">
+</head>
+
+<body>
+
+  <header>
+    <ul>
+      <li><a href="wishlist.html">Tu lista de deseos</a></li>
+      <li>
+        <h1>Carta a santa</h1>
+      </li>
+      <li><a href="resultado.html">Tu regalo</a></li>
+    </ul>
+  </header>
+
+  <section>
+    <img src="img/gift_top.svg" class="gift_top" alt="Imagen de un regalo">
+    <form method="post" name="formulario" id="carta-a-santa">
+      <p>Querido Santa,</p>
+      <p>Mi nombre es<input type="text" name="nombre" id="nombre" value="Fabricio"> y vivo en
+        <select name="ciudad">
+          <option value="">Selecciona...</option>
+          <option value="Buenos Aires">Bs. As.</option>
+          <option value="Catamarca">Catamarca</option>
+          <option value="Chaco">Chaco</option>
+          <option value="Chubut">Chubut</option>
+          <option value="Cordoba">Cordoba</option>
+          <option value="Corrientes">Corrientes</option>
+          <option value="Entre Rios">Entre Rios</option>
+          <option value="Formosa">Formosa</option>
+          <option value="Jujuy">Jujuy</option>
+          <option value="La Pampa">La Pampa</option>
+          <option value="La Rioja">La Rioja</option>
+          <option value="Mendoza">Mendoza</option>
+          <option value="Misiones">Misiones</option>
+          <option value="Neuquen">Neuquen</option>
+          <option value="Rio Negro">Rio Negro</option>
+          <option value="Salta">Salta</option>
+          <option value="San Juan">San Juan</option>
+          <option value="San Luis">San Luis</option>
+          <option value="Santa Cruz">Santa Cruz</option>
+          <option value="Santa Fe">Santa Fe</option>
+          <option value="Sgo. del Estero">Sgo. del Estero</option>
+          <option value="Tierra del Fuego">Tierra del Fuego</option>
+          <option value="Tucuman">Tucuman</option>
+        </select>.
+      </p>
+
+      <p> Creo que este año he sido
+        <input type="radio" value="muy_bueno" name="comportamiento"> Muy bueno
+        <input type="radio" value="bueno" name="comportamiento"> Bueno
+        <input type="radio" value="maso" name="comportamiento" checked> Mas o menos.
+      </p>
+      <p>Este año realmente me gustaría recibir</p>
+      <p>
+        <textarea name="descripcion-regalo" rows="4" cols="45"></textarea>
+      </p>
+
+      <ul id="errores">
+      </ul>
+
+      <p>
+        <button name="submit" id="enviar-carta">
+          Enviar carta
+        </button>
+      </p>
+    </form>
+
+    <div id="exito" class="oculto">
+      <strong>Tu envío fue exitoso!</strong>
+    </div>
+
+    <img src="img/gift_box.svg" class="gift_bottom">
+  </section>
+
+  <footer>
+    <ul>
+      <li class="twitter">
+        Twitter:
+        <a href="https://twitter.com/NodeGirlsSydney" target="_blank" rel="noopener noreferrer">@NodeGirlsSydney</a>
+        <a href="https://twitter.com/NodeGirlsMelb" target="_blank" rel="noopener noreferrer">@NodeGirlsMelb</a>
+        <a href="https://twitter.com/NodeGirlsBri" target="_blank" rel="noopener noreferrer">@NodeGirlsBri</a>
+        <a href="https://twitter.com/NodeGirlsPerth" target="_blank" rel="noopener noreferrer">@NodeGirlsPerth</a>
+      </li>
+      <li class="facebook">
+        Facebook:
+        <a href="https://www.facebook.com/NodeGirlsAustralia" target="_blank"
+          rel="noopener noreferrer">NodeGirlsAustralia</a>
+      </li>
+    </ul>
+    <ul>
+      <li class="website">
+        Website:
+        <a href="http://nodegirls.com.au" target="_blank" rel="noopener noreferrer">nodegirls.com.au</a>
+      </li>
+      <li class="email">
+        e-mail:
+        <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer">[email protected]</a>
+      </li>
+    </ul>
+  </footer>
+
+  <script src="js/main.js"></script>
+</body>
+
+</html>
diff --git a/tarea/clase 8/tarea 1/main.js 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
@@ -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