From 5b0a07b728f2e910fe585cf0b8eb0c4dbaa73c4a Mon Sep 17 00:00:00 2001 From: valenn0101 Date: Mon, 26 Dec 2022 13:32:03 -0300 Subject: [PATCH 1/8] Prueba.js --- index.html | 4 ++-- js/main-propio.js | 27 +++++++++++++++++++++++++++ 2 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 js/main-propio.js diff --git a/index.html b/index.html index 75772b2a..793f8c89 100644 --- a/index.html +++ b/index.html @@ -105,8 +105,8 @@ - - + + diff --git a/js/main-propio.js b/js/main-propio.js new file mode 100644 index 00000000..2b3f788b --- /dev/null +++ b/js/main-propio.js @@ -0,0 +1,27 @@ +const $formulario = document.getElementById("carta-a-santa"); + +const nombre = $formulario.nombre.value; +const ciudad = $formulario.ciudad.value; +const comportamiento = $formulario.comportamiento.value; +const descripcionRegalo = $formulario["descripcion-regalo"].value; + +console.log(nombre); +console.log(ciudad); +console.log(comportamiento); +console.log(descripcionRegalo); + +/* + +Validar que el nombre sea válido y escribir una prueba + +*/ + +function validarNombre(nombre){ + if(nombre.lenght === 0){ + return "Este campo debe tener al menos un caracter" + } + if(nombre.lenght >= 50){ + return "Este campo debe tener menos de 50 caracteres" + } + return "No hay error" +} \ No newline at end of file From be04a16580b7db708034d59257d0e83447c520bb Mon Sep 17 00:00:00 2001 From: valenn0101 Date: Wed, 28 Dec 2022 17:48:54 -0300 Subject: [PATCH 2/8] Clase8 Estamos trabajando con nuestros primeros objetos de JS --- instrucciones/nivel1.md | 2 ++ js/main-propio.js | 80 ++++++++++++++++++++++++++++++++++++----- js/main.js | 0 js/pruebas.js | 63 ++++++++++++++++++++++++++++---- 4 files changed, 129 insertions(+), 16 deletions(-) delete mode 100644 js/main.js diff --git a/instrucciones/nivel1.md b/instrucciones/nivel1.md index 0e2b3271..e099954d 100644 --- a/instrucciones/nivel1.md +++ b/instrucciones/nivel1.md @@ -105,6 +105,8 @@ Para validar nuestro formulario, vamos a tener que hacer lo siguiente: Para validar que sólo tenga letras, podemos hacer: +/^[A-z]+$/i + `const contieneSoloLetras = /^[A-z]+$/.test(valor);` Esto va a retornar un booleano. True si sólo contiene letras o false diff --git a/js/main-propio.js b/js/main-propio.js index 2b3f788b..dabf6160 100644 --- a/js/main-propio.js +++ b/js/main-propio.js @@ -12,16 +12,78 @@ console.log(descripcionRegalo); /* -Validar que el nombre sea válido y escribir una prueba +Validaciones */ -function validarNombre(nombre){ - if(nombre.lenght === 0){ - return "Este campo debe tener al menos un caracter" - } - if(nombre.lenght >= 50){ - return "Este campo debe tener menos de 50 caracteres" +function validarNombre(nombre) { + if (nombre.length === 0) { + return "Nombre debe tener al menos un caracter"; + } + if (nombre.length >= 50) { + return "Nombre debe tener menos de 50 caracteres"; + } + + if (!/^[a-z]+$/i.test(nombre)) { + return "Nombre solo acepta letras"; + } + + return "No hay error"; +} + +function validarCiudad(ciudad) { + if (ciudad.length === 0) { + return "Debe elegir una ciudad"; + } + return "No hay error"; +} + +function validarDescripcionRegalo(descripcionRegalo) { + if (descripcionRegalo.length >= 100) { + return "Debe usar menos de 100 caracteres"; + } + if (descripcionRegalo.length === 0) { + return "Debe tener al menos un caracter"; + } + if (!/[a-z0-9 ]+$/i.test(descripcionRegalo)) { + return "El campo solo puede tener numeros y letras"; + } + return "No hay error"; +} +/* +function validarFormulario (event){ + const $formulario = document.getElementById("carta-a-santa"); + + const nombre = $formulario.nombre.value; + const ciudad = $formulario.ciudad.value; + const descripcionRegalo = $formulario["descripcion-regalo"].value; + + const errorNombre = validarNombre(nombre); + const errorCiudad = validarCiudad(ciudad); + const errorDescripcionRegalo = validarDescripcionRegalo(descripcionRegalo); + + const errores = { + nombre: errorNombre, + ciudad: errorCiudad, + descripcionRegalo: errorDescripcionRegalo, + }; + + console.log(errores); + + manejarErrores([errorNombre, errorCiudad, errorDescripcionRegalo]); + + event.preventDefault(); + } + + function manejarErrores(errores){ + errorNombre = errores[0]; //nombre + errorCiudad = errores[1]; //ciudad + // errorDescripcionRegalo = errores[2]; //descripcionRegalo + + if (errorNombre){ + $formulario.nombre.className = "error" + } else { + $formulario.nombre.className = ""; } - return "No hay error" -} \ No newline at end of file + } + */ \ No newline at end of file diff --git a/js/main.js b/js/main.js deleted file mode 100644 index e69de29b..00000000 diff --git a/js/pruebas.js b/js/pruebas.js index 9cbb4229..31855c8c 100644 --- a/js/pruebas.js +++ b/js/pruebas.js @@ -1,15 +1,64 @@ function probarValidarNombre() { console.assert( - validarNombre('') === 'Este campo debe tener al menos 1 caracter', - 'Validar nombre no validó que el nombre no sea vacío', + validarNombre("") === "Nombre debe tener al menos un caracter", + "Validar nombre no funcionó con un string vacio" ); console.assert( - validarNombre( - '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111') === - 'Este campo debe tener menos de 50 caracteres', - 'Validar nombre no validó que el nombre sea menor a 50 caracteres', + validarNombre( + "111111111111111111111111111111111111111111111111111111111111111111111111111111111111111" + ) === "Nombre debe tener menos de 50 caracteres", + "Validar nombre no validó que el nombre sea menor a 50 caracteres" + ); + + console.assert( + validarNombre("123123") === "Nombre solo acepta letras", + "Validar nombre no validó que el nombre contenga solo letras" ); -} + console.assert( + validarNombre("Valentin") === "No hay error", + "Validar nombre fallo con un nombre validó" + ); +} probarValidarNombre(); + +function probarValidarCiudad() { + console.assert( + validarCiudad("") === "Debe elegir una ciudad", + "Validar ciudad no validó que se haya seleccionado una ciudad" + ); + + console.assert( + validarCiudad("Cordoba") === "No hay error", + "Validar ciudad fallo con un nombre validó" + ); +} +probarValidarCiudad(); + +function probarValidarDescripcionRegalo() { + console.assert( + validarDescripcionRegalo("") === "Debe tener al menos un caracter", + "Vaidar descripcion regalo no valido que el campo este vacio" + ); + + console.assert( + validarDescripcionRegalo( + "akjsdhfqwp9ehqwerhibddajsfhasdhufjasdfhdqweriqwhfdkjshfddd9qerihdfashdnfkjasdfbh9qwerdfbkjashfihasdfiausdhfashdfauisyhfasd" + ) === "Debe usar menos de 100 caracteres", + "Validar descripcion regalo no valido que haya menos de 100 caracteres" + ); + + console.assert( + validarDescripcionRegalo("Quiero un kilo de helado") === "No hay error", + "Validar descripcion regalo no funcionó con una descripcion correcta" + ); + + console.assert( + validarDescripcionRegalo(".,.,.,.") === + "El campo solo puede tener numeros y letras", + "Validar descripcion regalo no funcionó con los simbolos coma y punto" + ); +} + +probarValidarDescripcionRegalo(); From fd54c13c1e3c6f5256a7038917486467a78eaf0b Mon Sep 17 00:00:00 2001 From: valenn0101 Date: Fri, 30 Dec 2022 17:43:37 -0300 Subject: [PATCH 3/8] Al enviar la carta marca error Una vez que apretamos el boton Enviar Carta los input Nombre, Provincia y Descripcion Regalo figuran como si tuvieran un error pero no demuestran cual es --- index.html | 8 ++++--- js/main-propio.js | 61 +++++++++++++++++++++++++---------------------- 2 files changed, 37 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index 793f8c89..467c7bc0 100644 --- a/index.html +++ b/index.html @@ -59,10 +59,11 @@ Mas o menos.

Este año realmente me gustaría recibir

- +

    +

@@ -105,8 +106,9 @@ - - + + + diff --git a/js/main-propio.js b/js/main-propio.js index dabf6160..a78c2500 100644 --- a/js/main-propio.js +++ b/js/main-propio.js @@ -1,15 +1,3 @@ -const $formulario = document.getElementById("carta-a-santa"); - -const nombre = $formulario.nombre.value; -const ciudad = $formulario.ciudad.value; -const comportamiento = $formulario.comportamiento.value; -const descripcionRegalo = $formulario["descripcion-regalo"].value; - -console.log(nombre); -console.log(ciudad); -console.log(comportamiento); -console.log(descripcionRegalo); - /* Validaciones @@ -51,12 +39,17 @@ function validarDescripcionRegalo(descripcionRegalo) { return "No hay error"; } /* -function validarFormulario (event){ - const $formulario = document.getElementById("carta-a-santa"); + +Funciones validacion + +*/ + +function ValidarFormulario(event) { + const $formulario = document.querySelector("#carta-a-santa"); const nombre = $formulario.nombre.value; const ciudad = $formulario.ciudad.value; - const descripcionRegalo = $formulario["descripcion-regalo"].value; + const descripcionRegalo = $formulario.descripcionRegalo.value; const errorNombre = validarNombre(nombre); const errorCiudad = validarCiudad(ciudad); @@ -68,22 +61,32 @@ function validarFormulario (event){ descripcionRegalo: errorDescripcionRegalo, }; - console.log(errores); - - manejarErrores([errorNombre, errorCiudad, errorDescripcionRegalo]); + manejarErrores(errores); event.preventDefault(); - } +} - function manejarErrores(errores){ - errorNombre = errores[0]; //nombre - errorCiudad = errores[1]; //ciudad - // errorDescripcionRegalo = errores[2]; //descripcionRegalo +function manejarErrores(errores) { + errorNombre = errores.nombre; + errorCiudad = errores.ciudad; + errorDescripcionRegalo = errores.descripcionRegalo; - if (errorNombre){ - $formulario.nombre.className = "error" - } else { - $formulario.nombre.className = ""; - } + if (errorNombre) { + $formulario.nombre.className = "error"; + } else { + $formulario.nombre.className = ""; + } + if (errorCiudad) { + $formulario.ciudad.className = "error"; + } else { + $formulario.ciudad.className = ""; } - */ \ No newline at end of file + if(errorDescripcionRegalo){ + $formulario.descripcionRegalo.className = "error"; + } else { + $formulario.descripcionRegalo.className = ""; + } +} + +const $formulario = document.querySelector(`#carta-a-santa`); +$formulario.onsubmit = ValidarFormulario; From 64653ef274756bfb4b6cc653c7d2fdb20124469f Mon Sep 17 00:00:00 2001 From: valenn0101 Date: Sat, 31 Dec 2022 10:32:07 -0300 Subject: [PATCH 4/8] Error resuelto Ya se visualiza correctamente los formularios correctos y aquellos que tienen errores --- css/index.css | 164 +++++++++++++++++++++++----------------------- css/main.css | 35 +++++----- index.html | 2 +- js/main-propio.js | 58 +++++++++------- js/pruebas.js | 6 +- 5 files changed, 136 insertions(+), 129 deletions(-) diff --git a/css/index.css b/css/index.css index 5635b2dc..cd37c121 100644 --- a/css/index.css +++ b/css/index.css @@ -1,133 +1,131 @@ .on-success { - position: absolute; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background: rgba(0, 0, 0, 0.5); - overflow: hidden; - z-index: 98; + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.5); + overflow: hidden; + z-index: 98; } .on-success div { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 90vw; - height: 90vh; - max-width: 600px; - max-height: 500px; - border-radius: 2em; - text-align: center; - background: #333333; - display: flex; - flex-flow: column wrap; - align-items: center; - justify-content: center; - z-index: 99; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 90vw; + height: 90vh; + max-width: 600px; + max-height: 500px; + border-radius: 2em; + text-align: center; + background: #333333; + display: flex; + flex-flow: column wrap; + align-items: center; + justify-content: center; + z-index: 99; } .on-success div h1 { - color: white; + color: white; } .error { - border: 2px solid red; + border: 2px solid red; } .errorsBlock { - font-size: 14px; - color: red; + font-size: 14px; + color: red; } .hiddenWindow { - display: none; + display: none; } form { - background-color: #efefef; - width: calc(100% - 10em); - max-width: 640px; - min-height: 500px; - padding: 3em; - flex: 0; - text-align: center; - z-index: 2; + background-color: #efefef; + width: calc(100% - 10em); + max-width: 640px; + min-height: 500px; + padding: 3em; + flex: 0; + text-align: center; + z-index: 2; } input, select, textarea { - font-family: "Montserrat", sans-serif; - font-weight: 300; - font-size: 16px; - background: inherit; - border: 2px solid black; + font-family: "Montserrat", sans-serif; + font-weight: 300; + font-size: 16px; + background: inherit; + border: 2px solid black; } input { - border: none; - border-bottom: 2px solid black; - padding: 0.5em; + border: none; + border-bottom: 2px solid black; + padding: 0.5em; } -input[type='file'] { - width: 60%; - border: none; - font-family: "Montserrat", sans-serif; - font-weight: 400; - font-size: 16px; - padding: 1em 2em; +input[type="file"] { + width: 60%; + border: none; + font-family: "Montserrat", sans-serif; + font-weight: 400; + font-size: 16px; + padding: 1em 2em; } button { - font-family: "Montserrat", sans-serif; - font-weight: 700; - font-size: 18px; - padding: 1em 2em; - margin: 1em; - text-transform: uppercase; - border: none; - border-radius: 2em; - background: #20D7C0; - color: white; - cursor: pointer; - transition: all 0.3s ease-in-out; + font-family: "Montserrat", sans-serif; + font-weight: 700; + font-size: 18px; + padding: 1em 2em; + margin: 1em; + text-transform: uppercase; + border: none; + border-radius: 2em; + background: #20d7c0; + color: white; + cursor: pointer; + transition: all 0.3s ease-in-out; } button:hover { - background: black; - color: #20D7C0; + background: black; + color: #20d7c0; } @media all and (max-width: 640px) { - .on-success h1 { - font-size: 30px; - } + .on-success h1 { + font-size: 30px; + } - form { - font-size: 1em; - } + form { + font-size: 1em; + } - input[type=text], - textarea { - width: 50%; - } + input[type="text"], + textarea { + width: 50%; + } } - #exito { - margin-top: 30px; + margin-top: 30px; } #exito strong { - display: block; - margin: 23px; - font-size: 30px; + display: block; + margin: 23px; + font-size: 30px; } - .oculto { - display: none; + display: none; } diff --git a/css/main.css b/css/main.css index f314f513..7224cc50 100644 --- a/css/main.css +++ b/css/main.css @@ -18,13 +18,14 @@ a { white-space: nowrap; padding: 10px 15px; } -header, footer { +header, +footer { box-sizing: border-box; flex: 0 1 auto; background-color: black; color: white; } -header{ +header { width: 100%; } header ul { @@ -53,8 +54,8 @@ header a { } header a:hover { color: black; - border: 2px solid #CFBD6F; - background: #CFBD6F; + border: 2px solid #cfbd6f; + background: #cfbd6f; transition: all 0.3s ease-in-out; } section { @@ -66,18 +67,18 @@ section { flex-flow: column wrap; align-items: center; justify-content: center; - background: url('../img/confetis.svg') no-repeat center center; + background: url("../img/confetis.svg") no-repeat center center; } -.gift_top{ - z-index: 3; - margin-bottom: -50px; +.gift_top { + z-index: 3; + margin-bottom: -50px; } -.gift_bottom{ - z-index: 1; - margin-top: -20px; +.gift_bottom { + z-index: 1; + margin-top: -20px; } -footer{ +footer { font-family: "Montserrat", sans-serif; text-decoration: none; font-size: 0.9rem; @@ -95,14 +96,14 @@ footer li { padding: 5px; } footer a { - color: #CFBD6F; + color: #cfbd6f; } footer a:hover { color: white; } @media all and (max-width: 640px) { - header h1 { - display: none; - } -} \ No newline at end of file + header h1 { + display: none; + } +} diff --git a/index.html b/index.html index 467c7bc0..faf55e9d 100644 --- a/index.html +++ b/index.html @@ -59,7 +59,7 @@ Mas o menos.

Este año realmente me gustaría recibir

- +

    diff --git a/js/main-propio.js b/js/main-propio.js index a78c2500..d912a60b 100644 --- a/js/main-propio.js +++ b/js/main-propio.js @@ -16,14 +16,14 @@ function validarNombre(nombre) { return "Nombre solo acepta letras"; } - return "No hay error"; + return ""; } function validarCiudad(ciudad) { if (ciudad.length === 0) { return "Debe elegir una ciudad"; } - return "No hay error"; + return ""; } function validarDescripcionRegalo(descripcionRegalo) { @@ -36,8 +36,9 @@ function validarDescripcionRegalo(descripcionRegalo) { if (!/[a-z0-9 ]+$/i.test(descripcionRegalo)) { return "El campo solo puede tener numeros y letras"; } - return "No hay error"; + return ""; } + /* Funciones validacion @@ -46,10 +47,9 @@ Funciones validacion function ValidarFormulario(event) { const $formulario = document.querySelector("#carta-a-santa"); - const nombre = $formulario.nombre.value; const ciudad = $formulario.ciudad.value; - const descripcionRegalo = $formulario.descripcionRegalo.value; + const descripcionRegalo = $formulario["descripcion-regalo"].value; const errorNombre = validarNombre(nombre); const errorCiudad = validarCiudad(ciudad); @@ -58,34 +58,42 @@ function ValidarFormulario(event) { const errores = { nombre: errorNombre, ciudad: errorCiudad, - descripcionRegalo: errorDescripcionRegalo, + "descripcion-regalo": errorDescripcionRegalo, }; - manejarErrores(errores); + console.log(manejarErrores(errores)); event.preventDefault(); } function manejarErrores(errores) { - errorNombre = errores.nombre; - errorCiudad = errores.ciudad; - errorDescripcionRegalo = errores.descripcionRegalo; - - if (errorNombre) { - $formulario.nombre.className = "error"; - } else { - $formulario.nombre.className = ""; - } - if (errorCiudad) { - $formulario.ciudad.className = "error"; - } else { - $formulario.ciudad.className = ""; - } - if(errorDescripcionRegalo){ - $formulario.descripcionRegalo.className = "error"; - } else { - $formulario.descripcionRegalo.className = ""; + const llaves = Object.keys(errores); + const $errores = document.getElementById("errores"); + let cantidadErroes = 0; + + + while ($errores.firstChild) { + $errores.removeChild($errores.firstChild); } + + llaves.forEach(function (llave) { + const error = errores[llave]; + + if (error) { + cantidadErroes ++; + $formulario[llave].className = "error"; + + const $error = document.createElement("li"); + $error.innerText = error; + $errores.appendChild($error); + + } else { + $formulario[llave].className = ""; + } + + }); + + return cantidadErroes; } const $formulario = document.querySelector(`#carta-a-santa`); diff --git a/js/pruebas.js b/js/pruebas.js index 31855c8c..94dcb0ca 100644 --- a/js/pruebas.js +++ b/js/pruebas.js @@ -17,7 +17,7 @@ function probarValidarNombre() { ); console.assert( - validarNombre("Valentin") === "No hay error", + validarNombre("Valentin") === "", "Validar nombre fallo con un nombre validó" ); } @@ -30,7 +30,7 @@ function probarValidarCiudad() { ); console.assert( - validarCiudad("Cordoba") === "No hay error", + validarCiudad("Cordoba") === "", "Validar ciudad fallo con un nombre validó" ); } @@ -50,7 +50,7 @@ function probarValidarDescripcionRegalo() { ); console.assert( - validarDescripcionRegalo("Quiero un kilo de helado") === "No hay error", + validarDescripcionRegalo("Quiero un kilo de helado") === "", "Validar descripcion regalo no funcionó con una descripcion correcta" ); From 77dbf3f9d21a506750e2155bc1e3dc7e95e7897b Mon Sep 17 00:00:00 2001 From: valenn0101 Date: Sat, 31 Dec 2022 15:46:01 -0300 Subject: [PATCH 5/8] Tarea completada --- js/main-propio.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/js/main-propio.js b/js/main-propio.js index d912a60b..c87f6431 100644 --- a/js/main-propio.js +++ b/js/main-propio.js @@ -61,7 +61,17 @@ function ValidarFormulario(event) { "descripcion-regalo": errorDescripcionRegalo, }; - console.log(manejarErrores(errores)); + const noErrores = manejarErrores(errores) === 0; + + if(noErrores){ + $formulario.className = "oculto"; + document.getElementById("exito").className = ""; + + const tiempoDeEspera = 5000; + setTimeout(() => { + window.location.href = 'wishlist.html' + }, tiempoDeEspera) + } event.preventDefault(); } From 08b67eebff76136bd254a43161d636b598533694 Mon Sep 17 00:00:00 2001 From: valenn0101 Date: Sat, 31 Dec 2022 15:48:43 -0300 Subject: [PATCH 6/8] Update tarea-clase-7.js --- tarea/tarea-clase-7.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tarea/tarea-clase-7.js b/tarea/tarea-clase-7.js index f8cfc867..5c0b9eb5 100644 --- a/tarea/tarea-clase-7.js +++ b/tarea/tarea-clase-7.js @@ -1,6 +1,8 @@ /* * Hacer las funciones de validación de validarCiudad y validarDescripcionRegalo. * Escribir pruebas para esas funciones. +usar RegExp, forEach, Objetos, pruebas, estilos en los errores + y mostrar los errores en una lista * * Adicional: Escribir pruebas para las funciones de tareas anteriores. * From 5fafb886788f1271c94b74f49cae3deef1a82fe7 Mon Sep 17 00:00:00 2001 From: valenn0101 Date: Sat, 7 Jan 2023 00:23:09 -0300 Subject: [PATCH 7/8] Correciones --- js/main-propio.js | 11 ----------- tarea/tarea-clase-8.js | 4 +++- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/js/main-propio.js b/js/main-propio.js index c87f6431..80bb2e1c 100644 --- a/js/main-propio.js +++ b/js/main-propio.js @@ -1,9 +1,3 @@ -/* - -Validaciones - -*/ - function validarNombre(nombre) { if (nombre.length === 0) { return "Nombre debe tener al menos un caracter"; @@ -39,11 +33,6 @@ function validarDescripcionRegalo(descripcionRegalo) { return ""; } -/* - -Funciones validacion - -*/ function ValidarFormulario(event) { const $formulario = document.querySelector("#carta-a-santa"); diff --git a/tarea/tarea-clase-8.js b/tarea/tarea-clase-8.js index 1b57194d..b7239365 100644 --- a/tarea/tarea-clase-8.js +++ b/tarea/tarea-clase-8.js @@ -2,6 +2,8 @@ A las 2 tareas de la clase 6, ponerles las validaciones que consideren necesarias. - +usar RegExp, forEach, Objetos, pruebas, estilos en los errores + y mostrar los errores en una lista + TIP: Las edades no pueden tener decimales. */ From 74fec9a30b87360671d96c0334a2a6a72dff460e Mon Sep 17 00:00:00 2001 From: valenn0101 Date: Sat, 7 Jan 2023 00:25:14 -0300 Subject: [PATCH 8/8] , --- js/main-propio.js | 99 ----------------------------------------------- js/pruebas.js | 64 ------------------------------ 2 files changed, 163 deletions(-) delete mode 100644 js/main-propio.js delete mode 100644 js/pruebas.js diff --git a/js/main-propio.js b/js/main-propio.js deleted file mode 100644 index 80bb2e1c..00000000 --- a/js/main-propio.js +++ /dev/null @@ -1,99 +0,0 @@ -function validarNombre(nombre) { - if (nombre.length === 0) { - return "Nombre debe tener al menos un caracter"; - } - if (nombre.length >= 50) { - return "Nombre debe tener menos de 50 caracteres"; - } - - if (!/^[a-z]+$/i.test(nombre)) { - return "Nombre solo acepta letras"; - } - - return ""; -} - -function validarCiudad(ciudad) { - if (ciudad.length === 0) { - return "Debe elegir una ciudad"; - } - return ""; -} - -function validarDescripcionRegalo(descripcionRegalo) { - if (descripcionRegalo.length >= 100) { - return "Debe usar menos de 100 caracteres"; - } - if (descripcionRegalo.length === 0) { - return "Debe tener al menos un caracter"; - } - if (!/[a-z0-9 ]+$/i.test(descripcionRegalo)) { - return "El campo solo puede tener numeros y letras"; - } - return ""; -} - - -function ValidarFormulario(event) { - const $formulario = document.querySelector("#carta-a-santa"); - const nombre = $formulario.nombre.value; - const ciudad = $formulario.ciudad.value; - const descripcionRegalo = $formulario["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 noErrores = manejarErrores(errores) === 0; - - if(noErrores){ - $formulario.className = "oculto"; - document.getElementById("exito").className = ""; - - const tiempoDeEspera = 5000; - setTimeout(() => { - window.location.href = 'wishlist.html' - }, tiempoDeEspera) - } - - event.preventDefault(); -} - -function manejarErrores(errores) { - const llaves = Object.keys(errores); - const $errores = document.getElementById("errores"); - let cantidadErroes = 0; - - - while ($errores.firstChild) { - $errores.removeChild($errores.firstChild); - } - - llaves.forEach(function (llave) { - const error = errores[llave]; - - if (error) { - cantidadErroes ++; - $formulario[llave].className = "error"; - - const $error = document.createElement("li"); - $error.innerText = error; - $errores.appendChild($error); - - } else { - $formulario[llave].className = ""; - } - - }); - - return cantidadErroes; -} - -const $formulario = document.querySelector(`#carta-a-santa`); -$formulario.onsubmit = ValidarFormulario; diff --git a/js/pruebas.js b/js/pruebas.js deleted file mode 100644 index 94dcb0ca..00000000 --- a/js/pruebas.js +++ /dev/null @@ -1,64 +0,0 @@ -function probarValidarNombre() { - console.assert( - validarNombre("") === "Nombre debe tener al menos un caracter", - "Validar nombre no funcionó con un string vacio" - ); - - console.assert( - validarNombre( - "111111111111111111111111111111111111111111111111111111111111111111111111111111111111111" - ) === "Nombre debe tener menos de 50 caracteres", - "Validar nombre no validó que el nombre sea menor a 50 caracteres" - ); - - console.assert( - validarNombre("123123") === "Nombre solo acepta letras", - "Validar nombre no validó que el nombre contenga solo letras" - ); - - console.assert( - validarNombre("Valentin") === "", - "Validar nombre fallo con un nombre validó" - ); -} -probarValidarNombre(); - -function probarValidarCiudad() { - console.assert( - validarCiudad("") === "Debe elegir una ciudad", - "Validar ciudad no validó que se haya seleccionado una ciudad" - ); - - console.assert( - validarCiudad("Cordoba") === "", - "Validar ciudad fallo con un nombre validó" - ); -} -probarValidarCiudad(); - -function probarValidarDescripcionRegalo() { - console.assert( - validarDescripcionRegalo("") === "Debe tener al menos un caracter", - "Vaidar descripcion regalo no valido que el campo este vacio" - ); - - console.assert( - validarDescripcionRegalo( - "akjsdhfqwp9ehqwerhibddajsfhasdhufjasdfhdqweriqwhfdkjshfddd9qerihdfashdnfkjasdfbh9qwerdfbkjashfihasdfiausdhfashdfauisyhfasd" - ) === "Debe usar menos de 100 caracteres", - "Validar descripcion regalo no valido que haya menos de 100 caracteres" - ); - - console.assert( - validarDescripcionRegalo("Quiero un kilo de helado") === "", - "Validar descripcion regalo no funcionó con una descripcion correcta" - ); - - console.assert( - validarDescripcionRegalo(".,.,.,.") === - "El campo solo puede tener numeros y letras", - "Validar descripcion regalo no funcionó con los simbolos coma y punto" - ); -} - -probarValidarDescripcionRegalo();