Tarea clase 8

index.html

@@ -105,7 +105,7 @@
     </ul>
 </footer>
 
-<script src="js/main-mio.js"></script>
+<script src="js/tarea-clase-8.js"></script>
 <script src="js/pruebas.js"></script>
 </body>
 

instrucciones/nivel1.md

@@ -222,7 +222,7 @@ Atención: No se olviden de la `,` para separar múltiples valores.
   let cuentaErrores = 0;
   ```
 
-  6. Verificamos si hay un error en `nombr`e
+  6. Verificamos si hay un error en `nombre`
 
   ```
   if (errores.nombre) {

js/pruebas.js

@@ -1,15 +1,118 @@
+probarValidarNombre();
+probarValidarCiudad();
+probarValidarComportamiento();
+probarValidarDescripcionRegalo();
+
 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('') === 'El nombre no debe estar vacio',
+        'validarNombre no validó que nombre este vacío'
+
+    )
+
+    console.assert(
+
+        validarNombre('f') === 'El nombre debe tener al menos 2 caracteres',
+        'validarNombre no validó que nombre tenga al menos 2 caracteres'
+
+    )
+
+    console.assert(
+
+        validarNombre('11111111111111111111111111111111111111111111111111') === 'El nombre no debe tener mas de 50 caracteres',
+        'validarNombre no validó que nombre tenga menos de 50 caracteres'
+
+    )
+
+    console.assert(
+
+        validarNombre('21323321') === 'El nombre solo acepta letras',
+        'validarNombre no validó que nombre solo contenga letras'
+
+    )
+
+    console.assert(
+
+        validarNombre('Facundo') === '',
+        'validarNombre no validó un nombre correcto'
+
+    )
+
 }
 
-probarValidarNombre();
+function probarValidarCiudad() {
+
+    console.assert(
+
+        validarCiudad('') === 'Debe elegir una ciudad', 
+        'validarCiudad no validó que se ingrese una ciudad'
+
+    )
+
+    console.assert(
+
+        validarCiudad('Santa fe') === '',
+        'validarCiudad no validó que se ingrese un valor correcto'
+
+    )
+
+}
+
+function probarValidarComportamiento() {
+
+    console.assert(
+
+        validarComportamiento('') === 'Este campo no puede estar vacio', 
+        'validarComportamiento no validó que se ingrese 1 valor en comportamiento' 
+
+    )
+
+    console.assert(
+
+        validarComportamiento('maso') === '',
+        'validarComportamiento no validó que se ingrese un comportamiento válido'
+
+    )
+
+}
+
+function probarValidarDescripcionRegalo() {
+
+    console.assert(
+
+        validarDescripcionRegalo('') === 'El campo descripcion regalo no puede estar vacio', 
+        'validarDescripcionRegalo no validó que se ingrese vacio en descripcion del regalo'
+
+    )
+
+    console.assert(
+
+        validarDescripcionRegalo('abc') === 'El campo descripcion regalo debe tener al menos 4 caracteres', 
+        'validarDescripcionRegalo no validó que se ingresen al menos 4 caracteres en descripcion del regalo'
+
+    )
+
+    console.assert(
+
+        validarDescripcionRegalo('11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111') === 'El campo descripcion regalo no debe tener mas de 250 caracteres',
+        'validarDescripcionRegalo no validó que se ingrese menos de 250 caracteres en descripcion del regalo'
+
+    )
+
+    console.assert(
+
+        validarDescripcionRegalo(',.,.,.,.,.') === 'El campo descripcion regalo solo acepta letras y numeros',
+        'validarDescripcionRegalo no validó que se ingrese solo letras y numeros'
+
+    )
+
+    console.assert(
+
+        validarDescripcionRegalo('Hola santa quiero un...') === '',
+        'validarDescripcionRegalo no validó que se ingrese una descripcion válida'
+
+    )
+
+}

js/tarea-clase-8.js

@@ -0,0 +1,184 @@
+const $botonEnviarFormulario = document.querySelector('#enviar-carta');
+
+$botonEnviarFormulario.onclick = validarFormulario;
+
+function validarFormulario(event) {
+
+    event.preventDefault()
+
+    const $nombreUsuario = document.formulario.nombre.value;
+    const $ciudad = document.formulario.ciudad.value;
+    const $descripcionRegalo = document.formulario['descripcion-regalo'].value;
+
+    const errorNombre = validarNombre($nombreUsuario);
+    const errorCiudad = validarCiudad($ciudad);
+    const errorDescripcionRegalo = validarDescripcionRegalo($descripcionRegalo);
+
+    const errores = {
+
+        nombre: errorNombre,
+        ciudad: errorCiudad,
+        'descripcion-regalo': errorDescripcionRegalo,
+
+    };
+
+    const esExito = manejarErrores(errores) === 0;
+
+    if (esExito) {
+
+        formulario.classList.toggle("oculto");
+        document.querySelector('#exito').classList.toggle("oculto");
+
+        setTimeout(paginaListaDeDeseos,5000);
+
+    }
+
+}
+
+function validarNombre(nombreUsuario) {
+
+    if (nombreUsuario.length === 0) {
+
+        return 'El nombre no debe estar vacio';
+
+    }
+
+    if (nombreUsuario.length < 2) {
+
+        return 'El nombre debe tener al menos 2 caracteres';
+
+    } 
+
+    if (nombreUsuario.length >= 50) {
+
+        return 'El nombre no debe tener mas de 50 caracteres';
+
+    }
+
+    if (!/^[a-z]+$/i.test(nombreUsuario)) {
+
+        return 'El nombre solo acepta letras';
+
+    } 
+
+    return ""
+
+}
+
+function validarCiudad(ciudad) {
+
+    if (ciudad.length === 0) {
+
+        return 'Debe elegir una ciudad';
+
+    }
+
+    return ""
+
+}
+
+function validarComportamiento(comportamiento) {
+
+    if (comportamiento.length === 0) {
+
+        return 'Este campo no puede estar vacio';
+
+    }
+
+    return ""
+
+}
+
+function validarDescripcionRegalo(descripcion) {
+
+    if (descripcion.length === 0) {
+
+        return 'El campo descripcion regalo no puede estar vacio';
+
+    }
+
+    if (descripcion.length < 4) {
+
+        return 'El campo descripcion regalo debe tener al menos 4 caracteres';
+
+    }
+
+    if (descripcion.length >= 250) {
+
+        return 'El campo descripcion regalo no debe tener mas de 250 caracteres';
+
+    }
+
+    if (!/[a-z0-9]/i.test(descripcion)) {
+
+        return 'El campo descripcion regalo solo acepta letras y numeros'
+
+    }
+
+    return ""
+
+}
+
+function manejarErrores(errores) {
+
+    borrarErroresAnteriores();
+
+    let contadorErrores = 0;
+    const llaves = Object.keys(errores);
+
+    llaves.forEach(function(llave) {
+
+        const error = errores[llave]
+
+        if (error) {
+
+            formulario[llave].classList.add("error");
+            contadorErrores++;
+            mostrarErrores(error);
+
+        } else {
+
+            formulario[llave].classList.remove("error");
+
+        }
+
+    });
+
+    return contadorErrores;
+
+}
+
+function mostrarErrores(error) {
+
+    const $errores = document.querySelector('#errores');
+    const $error = document.createElement('li');
+
+    $error.classList.add("lista-errores");
+    $error.textContent = error;
+    $errores.appendChild($error);
+
+}
+
+function borrarErroresAnteriores() {
+
+    const $errores = document.querySelector('#errores');
+    const $error = document.querySelectorAll('.lista-errores')
+
+    $error.forEach(function(lista) {
+
+        if ($error.length > 0) {
+
+            $errores.removeChild(lista)
+
+        }
+
+    });
+
+}
+
+function paginaListaDeDeseos() {
+
+    alert('Serás redirigido a la lista de deseos');
+    location.href = "wishlist.html";
+
+}