From 721c314d066ba9c88464b741a562884485c50eca Mon Sep 17 00:00:00 2001 From: VanesaPM Date: Tue, 4 Oct 2022 20:55:57 -0300 Subject: [PATCH] Tarea clase 7 --- index.html | 202 ++++++++++++++++++++++++++++++-------------------- js/main.css | 3 + js/main.js | 56 ++++++++++++++ js/pruebas.js | 54 ++++++++++++-- 4 files changed, 229 insertions(+), 86 deletions(-) create mode 100644 js/main.css diff --git a/index.html b/index.html index 75772b2a..e34cf8d2 100644 --- a/index.html +++ b/index.html @@ -1,112 +1,154 @@ - + - - + + Carta a Papá Noel - - - - + + + + + - - -
- +
-
- Imagen de un regalo -
+
+ Imagen de un regalo +

Querido Santa,

-

Mi nombre es y vivo en - . +

+ Mi nombre es + y vivo en + .

-

Creo que este año he sido - Muy bueno - Bueno - Mas o menos.

+

+ 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/js/main.css b/js/main.css new file mode 100644 index 00000000..fe7af3ac --- /dev/null +++ b/js/main.css @@ -0,0 +1,3 @@ +.nuevo-parrafo { + color: red; +} diff --git a/js/main.js b/js/main.js index e69de29b..9c178d32 100644 --- a/js/main.js +++ b/js/main.js @@ -0,0 +1,56 @@ +/* + * Hacer las funciones de validación de validarCiudad y validarDescripcionRegalo. + * Escribir pruebas para esas funciones. + * + * Adicional: Escribir pruebas para las funciones de tareas anteriores. + * + * */ + +document.querySelector("#enviar-carta").onclick = function (event) { + const $form = document.querySelector("#carta-a-santa"); + const nombre = $form.nombre.value; + const ciudad = $form.ciudad.value; + const descripcionRegalo = $form["descripcion-regalo"].value; + + const contenedor = document.createElement("div"); + const parrafo = document.createElement("p"); + parrafo.className = "nuevo-parrafo"; + $form.appendChild(contenedor); + if ((parrafo.innerText = validarNombre(nombre))) { + contenedor.appendChild(parrafo); + } + validarNombre(nombre); + validarCiudad(ciudad); + validarDescripcionRegalo(descripcionRegalo); + return false; +}; + +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"; + } + return ""; +} + +function validarCiudad(ciudad) { + if (ciudad.length === 0) { + return "Debes seleccionar una ciudad"; + } + + return ""; +} + +function validarDescripcionRegalo(descripcionRegalo) { + if (descripcionRegalo.length === 0) { + return "Debes escribir que regalo queres"; + } + + if (descripcionRegalo.length >= 70) { + return "Este campo debe tener menos de 70 caracteres"; + } + + return ""; +} diff --git a/js/pruebas.js b/js/pruebas.js index 9cbb4229..27bffea3 100644 --- a/js/pruebas.js +++ b/js/pruebas.js @@ -1,15 +1,57 @@ +// 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" +// ); +// } + +// probarValidarNombre(); + 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("") === "Este campo debe tener al menos 1 caracter", + "Validar nombre no valido que el nombre no sea vacio" + ); + + console.assert( + validarNombre( + "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" + ) === "Este campo debe tener menos de 50 caracteres", + "Validar nombre no valido que el nombre tenga menos de 50 caracteres" ); + console.assert(validarNombre("Nombre de usuario") === ""), + "Validar nombre no funciono con un nombre valido)"; +} +function probarValidarCiudad() { + console.assert( + validarCiudad("") === "Debes seleccionar una ciudad", + "Validar ciudad no valido que ciudad no este vacio" + ); + console.assert( + validarCiudad("Ciudad donde vivis") === "", + "Validar ciudad no funciono con una ciudad valida" + ); +} + +function probarValidarDescripcionRegalo() { + console.assert( + validarDescripcionRegalo("") === "Debes escribir que regalo queres", + "Validar descripcion regalo no funciono con una descripcion que no sea vacia" + ); console.assert( - validarNombre( - '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111') === - 'Este campo debe tener menos de 50 caracteres', - 'Validar nombre no validó que el nombre sea menor a 50 caracteres', + validarDescripcionRegalo("Regalo que queres") === "", + "Validar descripcion regalo no funciono con una descripcion valida" ); } probarValidarNombre(); +probarValidarCiudad(); +probarValidarDescripcionRegalo();