From 5adb94e136eabee26e780767772d212c86351dbf Mon Sep 17 00:00:00 2001 From: MalconH Date: Tue, 22 Aug 2023 10:57:19 -0300 Subject: [PATCH 1/5] Realiza la clase 6 --- index.html | 19 ++++++++++++------- js/nivel3.js | 31 ++++++++++++++++++++++--------- 2 files changed, 34 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 976445f39..a0d89598a 100644 --- a/index.html +++ b/index.html @@ -17,10 +17,13 @@

Escribamos un poco de código el día de hoy!

-

En Chrome y Firefox, - para abrir la Consola del navegador, click derecho en esta página y seleccionen 'Inspect'. La consola va a aparecer - abajo o a la derecha de la pantalla. -

Si estás listos para probar un atajo del teclado, apretá 'CMD+OPT+J' +

En Chrome y Firefox, + para abrir la Consola del navegador, click derecho en esta página y seleccionen 'Inspect'. La + consola va a aparecer + abajo o a la derecha de la pantalla. +

Si estás listos para probar un atajo del teclado, apretá 'CMD+OPT+J' en Mac, ó 'F12' en Windows

@@ -33,8 +36,9 @@

Escribamos un poco de código el día de hoy!

@@ -69,6 +73,7 @@

Escribamos un poco de código el día de hoy!

- + + diff --git a/js/nivel3.js b/js/nivel3.js index 3dba087e8..96097e6db 100644 --- a/js/nivel3.js +++ b/js/nivel3.js @@ -120,12 +120,16 @@ // pero no la variable en sí misma. Vas a ver esto en acción ahora mismo. */ +const $nuestroTwitter = document.querySelector(".twitter"); +console.log($nuestroTwitter); + // TAREA: Ahora te toca a vos! — Obtené la etiqueta h1 de la página y guardala en una variable // variable llamada nuestroTitulo. // Utilizá console.log para ver lo que obtuviste! - +const titulo = document.querySelector("h1"); +console.log(titulo); @@ -146,7 +150,7 @@ // TAREA: Obtené todos los elementos
  • de la página en una variable llamada mediaLinks. - +const mediaLinks = document.querySelectorAll("li"); @@ -154,7 +158,7 @@ // TAREA: Ahora utilizá console.log para ver la cantidad de // elementos li que hay con mediaLinks.length - +console.log(mediaLinks.length); @@ -162,7 +166,9 @@ // TAREA: ¿Te acordás de los bucles del nivel 2? Usando lo que sabés de ellos, realizá iteraciones // sobre cada item de mediaLinks y mostralos en pantalla con console.log - +for (let i = 0; i < mediaLinks.length; i++) { + console.log(mediaLinks[i]); +} @@ -184,7 +190,7 @@ // TAREA: Obtené el contenido de nuestro elemento 'h1' // y utilizá console.log para mostrarlo. - +console.log(titulo.textContent); @@ -206,7 +212,7 @@ // TAREA: Hagamos un nuevo título! Cambiá el contenido de nuestro 'h1' y ponele lo que quieras. - +titulo.textContent = "Chau!"; /* @@ -223,7 +229,7 @@ // TAREA: Actualizá el valor del atributo 'src' de nuestra etiqueta 'img' a "img/kittens.jpeg". - +document.querySelector("#logo > img").src = "img/kittens.jpeg"; @@ -248,8 +254,11 @@ // Tarea: Obtené cualquier elemento de la página y cambiale algunos estilos. - - +/* +titulo.style.backgroundColor = "blue"; +titulo.style.color = "#f0f0f0"; +titulo.style.fontStyle = "italic"; +*/ @@ -278,6 +287,10 @@ // // P.S. También les podés dar estilos al nuevo nodo que creaste. +const $imagenLogo = document.createElement("img"); +$imagenLogo.src = "img/woman_bw.jpg"; +$imagenLogo.alt = "Foto de una mujer en blanco y negro sosteniendo una laptop"; +document.querySelector("header").appendChild($imagenLogo); From 84d2188d5570a47b051e72daace1888aee17881e Mon Sep 17 00:00:00 2001 From: MalconH Date: Thu, 24 Aug 2023 14:32:25 -0300 Subject: [PATCH 2/5] Agrupa los archivos de soluciones en una misma carpeta Los archivos con soluciones creadas por Fabricio los meto en una carpeta todos juntos para que no se mezclen con mis soluciones --- tareas/clase-6/{ => solucion-de-fabricio}/calculos-mio.js | 0 tareas/clase-6/{ => solucion-de-fabricio}/index-mio.html | 0 tareas/clase-6/{ => solucion-de-fabricio}/main-mio.css | 0 tareas/clase-6/{ => solucion-de-fabricio}/tarea-clase-6-mio.js | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename tareas/clase-6/{ => solucion-de-fabricio}/calculos-mio.js (100%) rename tareas/clase-6/{ => solucion-de-fabricio}/index-mio.html (100%) rename tareas/clase-6/{ => solucion-de-fabricio}/main-mio.css (100%) rename tareas/clase-6/{ => solucion-de-fabricio}/tarea-clase-6-mio.js (100%) diff --git a/tareas/clase-6/calculos-mio.js b/tareas/clase-6/solucion-de-fabricio/calculos-mio.js similarity index 100% rename from tareas/clase-6/calculos-mio.js rename to tareas/clase-6/solucion-de-fabricio/calculos-mio.js diff --git a/tareas/clase-6/index-mio.html b/tareas/clase-6/solucion-de-fabricio/index-mio.html similarity index 100% rename from tareas/clase-6/index-mio.html rename to tareas/clase-6/solucion-de-fabricio/index-mio.html diff --git a/tareas/clase-6/main-mio.css b/tareas/clase-6/solucion-de-fabricio/main-mio.css similarity index 100% rename from tareas/clase-6/main-mio.css rename to tareas/clase-6/solucion-de-fabricio/main-mio.css diff --git a/tareas/clase-6/tarea-clase-6-mio.js b/tareas/clase-6/solucion-de-fabricio/tarea-clase-6-mio.js similarity index 100% rename from tareas/clase-6/tarea-clase-6-mio.js rename to tareas/clase-6/solucion-de-fabricio/tarea-clase-6-mio.js From 568f8931d03b8c41640adf9b6be20fd7360f489d Mon Sep 17 00:00:00 2001 From: MalconH Date: Tue, 29 Aug 2023 10:57:25 -0300 Subject: [PATCH 3/5] Resuelve la tarea 1 de la clase 6 --- tareas/clase-6/tarea 1/tarea1.css | 4 + tareas/clase-6/tarea 1/tarea1.html | 42 ++++++++ tareas/clase-6/tarea 1/tarea1.js | 152 +++++++++++++++++++++++++++++ 3 files changed, 198 insertions(+) create mode 100644 tareas/clase-6/tarea 1/tarea1.css create mode 100644 tareas/clase-6/tarea 1/tarea1.html create mode 100644 tareas/clase-6/tarea 1/tarea1.js diff --git a/tareas/clase-6/tarea 1/tarea1.css b/tareas/clase-6/tarea 1/tarea1.css new file mode 100644 index 000000000..1a52ce2c3 --- /dev/null +++ b/tareas/clase-6/tarea 1/tarea1.css @@ -0,0 +1,4 @@ +.hidden { + display: none; + color: red; +} diff --git a/tareas/clase-6/tarea 1/tarea1.html b/tareas/clase-6/tarea 1/tarea1.html new file mode 100644 index 000000000..cbcba8f60 --- /dev/null +++ b/tareas/clase-6/tarea 1/tarea1.html @@ -0,0 +1,42 @@ + + + + + + + Calculadora de edades + + + + +

    Hola! Vamos a hacer algunos cálculos!

    +
    +

    Primero que nada, decinnos cuánta gente vive en tu casa:

    + + +
    + +
    +
    + + +
    + + + + + + diff --git a/tareas/clase-6/tarea 1/tarea1.js b/tareas/clase-6/tarea 1/tarea1.js new file mode 100644 index 000000000..d1cd4f472 --- /dev/null +++ b/tareas/clase-6/tarea 1/tarea1.js @@ -0,0 +1,152 @@ +/* +TAREA: Empezar preguntando cuánta gente hay en el grupo familiar. +Crear tantos inputs+labels como gente haya para completar la edad de cada integrante. +Al hacer click en "calcular", mostrar en un elemento pre-existente la mayor edad, la menor edad y el promedio del grupo familiar. + +Punto bonus: Crear un botón para "empezar de nuevo" que empiece el proceso nuevamente, borrando los inputs ya creados (investigar cómo en MDN). +*/ + +document.querySelector("#enviar-cantidad-integrantes").onclick = function () { + const $cantidadIntegrantes = document.querySelector("#cantidad-integrantes"); + const cantidadIntegrantes = Number($cantidadIntegrantes.value) + + if (cantidadIntegrantes <= 0) return false; + + borrarIntegrantesAnteriores(); + crearIntegrantes(cantidadIntegrantes); + mostrarControles(); + ocultarResultados(); + + $cantidadIntegrantes.value = ""; + return false; +} + +document.querySelector("#procesar-edades").onclick = function () { + const $edadesIntegrantes = document.querySelectorAll(".edad-integrante"); + if (validarInputsEdadesUsuario($edadesIntegrantes)) return false; + + const edadesIntegrantes = []; + for (let i = 0; i < $edadesIntegrantes.length; i++) { + edadesIntegrantes.push(Number($edadesIntegrantes[i].value)); + } + + const edadMayor = dameEdadMayor(edadesIntegrantes); + const edadMenor = dameEdadMenor(edadesIntegrantes); + const edadPromedio = dameEdadPromedio(edadesIntegrantes); + + document.querySelector("#edad-mayor").textContent = edadMayor; + document.querySelector("#edad-menor").textContent = edadMenor; + document.querySelector("#edad-promedio").textContent = edadPromedio; + mostrarResultados(); + + return false; +} + +document.querySelector("#borrar").onclick = function () { + resetear(); +} + +function crearIntegrantes(cantidadIntegrantes) { + for (let i = 0; i < cantidadIntegrantes; i++) { + crearIntegrante(i); + } +} + +function crearIntegrante(indice) { + const $div = document.createElement("div"); + $div.className = "integrante"; + + const $h3 = document.createElement("h3"); + $h3.className = "h3"; + $h3.textContent = `Integrante #${indice + 1}:` + + const $label = document.createElement("label"); + $label.className = "label"; + $label.htmlFor = `edad-integrante-${indice + 1}`; + $label.textContent = "Edad: "; + + const $input = document.createElement("input"); + $input.type = "number"; + $input.id = `edad-integrante-${indice + 1}`; + $input.className = "input edad-integrante"; + $input.placeholder = "25..."; + + + $div.appendChild($h3); + $div.appendChild($label); + $div.appendChild($input); + + const $contenedorIntegrantes = document.querySelector(".integrantes"); + $contenedorIntegrantes.appendChild($div); +} + +function borrarIntegrantesAnteriores() { + const $integrantesAnteriores = document.querySelectorAll(".integrante") + + for (let i = 0; i < $integrantesAnteriores.length; i++) { + $integrantesAnteriores[i].remove(); + } +} + +function mostrarControles() { + const $divControles = document.querySelector(".controles"); + $divControles.classList.remove("hidden"); +} +function ocultarControles() { + const $divControles = document.querySelector(".controles"); + $divControles.classList.add("hidden"); +} + +// Recibe un NodeList de inputs de edades y devuelve true si alguna de las edades es inválida +function validarInputsEdadesUsuario(inputsEdades) { + let tieneInputsInvalidos = false; + for (let i = 0; i < inputsEdades.length; i++) { + if (inputsEdades[i].value <= 0) tieneInputsInvalidos = true; + } + + return tieneInputsInvalidos; +} + +function dameEdadMayor(edades) { + let edadMayor = 0; + + for (let i = 0; i < edades.length; i++) { + edades[i] >= edadMayor ? edadMayor = edades[i] : ""; + } + + return edadMayor; +} + +function dameEdadMenor(edades) { + let edadMenor = edades[0]; + + for (let i = 0; i < edades.length; i++) { + edades[i] <= edadMenor ? edadMenor = edades[i] : ""; + } + + return edadMenor; +} + +function dameEdadPromedio(edades) { + let totalEdades = 0; + + for (let i = 0; i < edades.length; i++) { + totalEdades += edades[i]; + } + + return totalEdades / edades.length; +} + +function mostrarResultados() { + document.querySelector(".resultados").classList.remove("hidden"); +} + +function ocultarResultados() { + document.querySelector(".resultados").classList.add("hidden"); +} + +function resetear() { + borrarIntegrantesAnteriores(); + ocultarControles(); + ocultarResultados(); +} From efecdb965ea57f64e8fe7e17e22b1e2b2d12318b Mon Sep 17 00:00:00 2001 From: MalconH Date: Tue, 29 Aug 2023 16:09:00 -0300 Subject: [PATCH 4/5] Resuelve la parte 2 de la tarea de la clase 5 --- tareas/clase-6/tarea 1/tarea1.js | 152 ------------ .../{tarea 1/tarea1.css => tarea/tarea.css} | 0 .../{tarea 1/tarea1.html => tarea/tarea.html} | 18 +- tareas/clase-6/tarea/tarea.js | 222 ++++++++++++++++++ 4 files changed, 237 insertions(+), 155 deletions(-) delete mode 100644 tareas/clase-6/tarea 1/tarea1.js rename tareas/clase-6/{tarea 1/tarea1.css => tarea/tarea.css} (100%) rename tareas/clase-6/{tarea 1/tarea1.html => tarea/tarea.html} (69%) create mode 100644 tareas/clase-6/tarea/tarea.js diff --git a/tareas/clase-6/tarea 1/tarea1.js b/tareas/clase-6/tarea 1/tarea1.js deleted file mode 100644 index d1cd4f472..000000000 --- a/tareas/clase-6/tarea 1/tarea1.js +++ /dev/null @@ -1,152 +0,0 @@ -/* -TAREA: Empezar preguntando cuánta gente hay en el grupo familiar. -Crear tantos inputs+labels como gente haya para completar la edad de cada integrante. -Al hacer click en "calcular", mostrar en un elemento pre-existente la mayor edad, la menor edad y el promedio del grupo familiar. - -Punto bonus: Crear un botón para "empezar de nuevo" que empiece el proceso nuevamente, borrando los inputs ya creados (investigar cómo en MDN). -*/ - -document.querySelector("#enviar-cantidad-integrantes").onclick = function () { - const $cantidadIntegrantes = document.querySelector("#cantidad-integrantes"); - const cantidadIntegrantes = Number($cantidadIntegrantes.value) - - if (cantidadIntegrantes <= 0) return false; - - borrarIntegrantesAnteriores(); - crearIntegrantes(cantidadIntegrantes); - mostrarControles(); - ocultarResultados(); - - $cantidadIntegrantes.value = ""; - return false; -} - -document.querySelector("#procesar-edades").onclick = function () { - const $edadesIntegrantes = document.querySelectorAll(".edad-integrante"); - if (validarInputsEdadesUsuario($edadesIntegrantes)) return false; - - const edadesIntegrantes = []; - for (let i = 0; i < $edadesIntegrantes.length; i++) { - edadesIntegrantes.push(Number($edadesIntegrantes[i].value)); - } - - const edadMayor = dameEdadMayor(edadesIntegrantes); - const edadMenor = dameEdadMenor(edadesIntegrantes); - const edadPromedio = dameEdadPromedio(edadesIntegrantes); - - document.querySelector("#edad-mayor").textContent = edadMayor; - document.querySelector("#edad-menor").textContent = edadMenor; - document.querySelector("#edad-promedio").textContent = edadPromedio; - mostrarResultados(); - - return false; -} - -document.querySelector("#borrar").onclick = function () { - resetear(); -} - -function crearIntegrantes(cantidadIntegrantes) { - for (let i = 0; i < cantidadIntegrantes; i++) { - crearIntegrante(i); - } -} - -function crearIntegrante(indice) { - const $div = document.createElement("div"); - $div.className = "integrante"; - - const $h3 = document.createElement("h3"); - $h3.className = "h3"; - $h3.textContent = `Integrante #${indice + 1}:` - - const $label = document.createElement("label"); - $label.className = "label"; - $label.htmlFor = `edad-integrante-${indice + 1}`; - $label.textContent = "Edad: "; - - const $input = document.createElement("input"); - $input.type = "number"; - $input.id = `edad-integrante-${indice + 1}`; - $input.className = "input edad-integrante"; - $input.placeholder = "25..."; - - - $div.appendChild($h3); - $div.appendChild($label); - $div.appendChild($input); - - const $contenedorIntegrantes = document.querySelector(".integrantes"); - $contenedorIntegrantes.appendChild($div); -} - -function borrarIntegrantesAnteriores() { - const $integrantesAnteriores = document.querySelectorAll(".integrante") - - for (let i = 0; i < $integrantesAnteriores.length; i++) { - $integrantesAnteriores[i].remove(); - } -} - -function mostrarControles() { - const $divControles = document.querySelector(".controles"); - $divControles.classList.remove("hidden"); -} -function ocultarControles() { - const $divControles = document.querySelector(".controles"); - $divControles.classList.add("hidden"); -} - -// Recibe un NodeList de inputs de edades y devuelve true si alguna de las edades es inválida -function validarInputsEdadesUsuario(inputsEdades) { - let tieneInputsInvalidos = false; - for (let i = 0; i < inputsEdades.length; i++) { - if (inputsEdades[i].value <= 0) tieneInputsInvalidos = true; - } - - return tieneInputsInvalidos; -} - -function dameEdadMayor(edades) { - let edadMayor = 0; - - for (let i = 0; i < edades.length; i++) { - edades[i] >= edadMayor ? edadMayor = edades[i] : ""; - } - - return edadMayor; -} - -function dameEdadMenor(edades) { - let edadMenor = edades[0]; - - for (let i = 0; i < edades.length; i++) { - edades[i] <= edadMenor ? edadMenor = edades[i] : ""; - } - - return edadMenor; -} - -function dameEdadPromedio(edades) { - let totalEdades = 0; - - for (let i = 0; i < edades.length; i++) { - totalEdades += edades[i]; - } - - return totalEdades / edades.length; -} - -function mostrarResultados() { - document.querySelector(".resultados").classList.remove("hidden"); -} - -function ocultarResultados() { - document.querySelector(".resultados").classList.add("hidden"); -} - -function resetear() { - borrarIntegrantesAnteriores(); - ocultarControles(); - ocultarResultados(); -} diff --git a/tareas/clase-6/tarea 1/tarea1.css b/tareas/clase-6/tarea/tarea.css similarity index 100% rename from tareas/clase-6/tarea 1/tarea1.css rename to tareas/clase-6/tarea/tarea.css diff --git a/tareas/clase-6/tarea 1/tarea1.html b/tareas/clase-6/tarea/tarea.html similarity index 69% rename from tareas/clase-6/tarea 1/tarea1.html rename to tareas/clase-6/tarea/tarea.html index cbcba8f60..6ce757069 100644 --- a/tareas/clase-6/tarea 1/tarea1.html +++ b/tareas/clase-6/tarea/tarea.html @@ -5,7 +5,7 @@ Calculadora de edades - + @@ -21,7 +21,7 @@

    Hola! Vamos a hacer algunos cálculos!

    @@ -35,8 +35,20 @@

    Hola! Vamos a hacer algunos cálculos!

    Edad promedio:

    + +

    Salario anual mayor:

    +

    + +

    Salario anual menor:

    +

    + +

    Salario anual promedio:

    +

    + +

    Salario mensual promedio:

    +

    - + diff --git a/tareas/clase-6/tarea/tarea.js b/tareas/clase-6/tarea/tarea.js new file mode 100644 index 000000000..c7ee3b396 --- /dev/null +++ b/tareas/clase-6/tarea/tarea.js @@ -0,0 +1,222 @@ +/* +TAREA: Empezar preguntando cuánta gente hay en el grupo familiar. +Crear tantos inputs+labels como gente haya para completar la edad de cada integrante. +Al hacer click en "calcular", mostrar en un elemento pre-existente la mayor edad, la menor edad y el promedio del grupo familiar. + +Punto bonus: Crear un botón para "empezar de nuevo" que empiece el proceso nuevamente, borrando los inputs ya creados (investigar cómo en MDN). +*/ + +document.querySelector("#enviar-cantidad-integrantes").onclick = function () { + const $cantidadIntegrantes = document.querySelector("#cantidad-integrantes"); + const cantidadIntegrantes = Number($cantidadIntegrantes.value) + + if (cantidadIntegrantes <= 0) return false; + + borrarIntegrantesAnteriores(); + crearIntegrantes(cantidadIntegrantes); + mostrarControles(); + ocultarResultados(); + + $cantidadIntegrantes.value = ""; + return false; +} + +document.querySelector("#borrar").onclick = function () { + resetear(); +} + +function crearIntegrantes(cantidadIntegrantes) { + for (let i = 0; i < cantidadIntegrantes; i++) { + crearIntegrante(i); + } +} + +function borrarIntegrantesAnteriores() { + const $integrantesAnteriores = document.querySelectorAll(".integrante") + + for (let i = 0; i < $integrantesAnteriores.length; i++) { + $integrantesAnteriores[i].remove(); + } +} + +function mostrarControles() { + const $divControles = document.querySelector(".controles"); + $divControles.classList.remove("hidden"); +} +function ocultarControles() { + const $divControles = document.querySelector(".controles"); + $divControles.classList.add("hidden"); +} + +// Recibe un NodeList de inputs de edades y devuelve true si alguna de las edades es inválida +function validarInputsEdadesUsuario(inputsEdades) { + let tieneInputsInvalidos = false; + for (let i = 0; i < inputsEdades.length; i++) { + if (inputsEdades[i].value <= 0) tieneInputsInvalidos = true; + } + + return tieneInputsInvalidos; +} + +function dameMayor(numeros) { + let numeroMayor = numeros[0]; + + for (let i = 0; i < numeros.length; i++) { + numeros[i] >= numeroMayor ? numeroMayor = numeros[i] : ""; + } + + return numeroMayor; +} + +function dameMenor(numeros) { + let numeroMenor = numeros[0]; + + for (let i = 0; i < numeros.length; i++) { + numeros[i] <= numeroMenor ? numeroMenor = numeros[i] : ""; + } + + return numeroMenor; +} + +function damePromedio(numeros) { + if (numeros.length === 0) return 0; + + let sumaTotal = 0; + + for (let i = 0; i < numeros.length; i++) { + sumaTotal += numeros[i]; + } + + return (sumaTotal / numeros.length).toFixed(2); +} + +function mostrarResultados() { + document.querySelector(".resultados").classList.remove("hidden"); +} + +function ocultarResultados() { + document.querySelector(".resultados").classList.add("hidden"); +} + +function resetear() { + borrarIntegrantesAnteriores(); + ocultarControles(); + ocultarResultados(); +} + +/* +TAREA: +Crear una interfaz que permita agregar ó quitar (botones agregar y quitar) inputs+labels +para completar el salario anual de cada integrante de la familia que trabaje. +Al hacer click en "calcular", mostrar en un elemento pre-existente el mayor salario anual, +menor salario anual, salario anual promedio y salario mensual promedio. + +Punto bonus: si hay inputs vacíos, ignorarlos en el cálculo (no contarlos como 0). +*/ + +document.querySelector("#calcular").onclick = function () { + const $edadesIntegrantes = document.querySelectorAll(".edad-integrante"); + const $salarioIntegrantes = document.querySelectorAll(".salario-integrante"); + + if (validarInputsEdadesUsuario($edadesIntegrantes)) return false; + + const edadesIntegrantes = []; + for (let i = 0; i < $edadesIntegrantes.length; i++) { + edadesIntegrantes.push(Number($edadesIntegrantes[i].value)); + } + + const salarioIntegrantes = []; + for (let i = 0; i < $salarioIntegrantes.length; i++) { + if ($salarioIntegrantes[i].value > 0) { + salarioIntegrantes.push(Number($salarioIntegrantes[i].value)); + } + } + + document.querySelector("#edad-mayor").textContent = dameMayor(edadesIntegrantes); + document.querySelector("#edad-menor").textContent = dameMenor(edadesIntegrantes); + document.querySelector("#edad-promedio").textContent = damePromedio(edadesIntegrantes); + document.querySelector("#salario-anual-mayor").textContent = dameMayor(salarioIntegrantes); + document.querySelector("#salario-anual-menor").textContent = dameMenor(salarioIntegrantes); + document.querySelector("#salario-anual-promedio").textContent = damePromedio(salarioIntegrantes); + document.querySelector("#salario-mensual-promedio").textContent = damePromedioMensual(salarioIntegrantes); + mostrarResultados(); + + return false; +} + +function crearIntegrante(indice) { + const $div = document.createElement("div"); + $div.className = "integrante"; + + const $h3 = document.createElement("h3"); + $h3.className = "h3"; + $h3.textContent = `Integrante #${indice + 1}:` + + const $label = document.createElement("label"); + $label.className = "label"; + $label.htmlFor = `edad-integrante-${indice + 1}`; + $label.textContent = "Edad: "; + + const $input = document.createElement("input"); + $input.type = "number"; + $input.id = `edad-integrante-${indice + 1}`; + $input.className = "input edad-integrante"; + $input.placeholder = "25..."; + + const $label2 = document.createElement("label"); + $label2.className = "label"; + $label2.htmlFor = `integrante-trabaja-${indice + 1}` + $label2.textContent = "Tiene trabajo"; + + const $inputChkbox = document.createElement("input"); + $inputChkbox.type = "checkbox"; + $inputChkbox.id = `integrante-trabaja-${indice + 1}`; + $inputChkbox.className = "input integrante-trabaja"; + + $inputChkbox.onclick = function () { + generarSalarioIntegrante($inputChkbox); + mostrarIngresarSalario($inputChkbox); + } + + $div.appendChild($h3); + $div.appendChild($label); + $div.appendChild($input); + $div.appendChild($label2); + $div.appendChild($inputChkbox); + + const $contenedorIntegrantes = document.querySelector(".integrantes"); + $contenedorIntegrantes.appendChild($div); +} + +function mostrarIngresarSalario(nodoActual) { + const $contenedorIngresarSalario = nodoActual.nextElementSibling; + $contenedorIngresarSalario.lastElementChild.value = ""; + $contenedorIngresarSalario.classList.toggle("hidden"); +} + +function generarSalarioIntegrante(nodoActual) { + if (!nodoActual.nextElementSibling) { + + const $nodoPadre = nodoActual.parentNode; + + const $div = document.createElement("div"); + $div.className = "ingresar-salario hidden"; + + const $label = document.createElement("label"); + $label.className = "label"; + $label.textContent = "Salario anual"; + + const $input = document.createElement("input"); + $input.type = "number"; + $input.className = "input salario-integrante"; + $input.placeholder = "Ingresa el salario anual..."; + + $div.appendChild($label); + $div.appendChild($input); + $nodoPadre.appendChild($div); + } +} + +function damePromedioMensual(numerosAnuales) { + return (damePromedio(numerosAnuales) / 12); +} From 0da6a22c5cf4b5f1eb520bca86a87f26de1b0ab6 Mon Sep 17 00:00:00 2001 From: MalconH Date: Mon, 4 Sep 2023 16:28:15 -0300 Subject: [PATCH 5/5] Agrega validaciones para datos ingresados --- tareas/clase-6/tarea/tarea.js | 108 ++++++++++++++++++++++++---------- 1 file changed, 78 insertions(+), 30 deletions(-) diff --git a/tareas/clase-6/tarea/tarea.js b/tareas/clase-6/tarea/tarea.js index c7ee3b396..e027f64f8 100644 --- a/tareas/clase-6/tarea/tarea.js +++ b/tareas/clase-6/tarea/tarea.js @@ -6,11 +6,17 @@ Al hacer click en "calcular", mostrar en un elemento pre-existente la mayor edad Punto bonus: Crear un botón para "empezar de nuevo" que empiece el proceso nuevamente, borrando los inputs ya creados (investigar cómo en MDN). */ -document.querySelector("#enviar-cantidad-integrantes").onclick = function () { +document.querySelector("#enviar-cantidad-integrantes").onclick = function (event) { const $cantidadIntegrantes = document.querySelector("#cantidad-integrantes"); - const cantidadIntegrantes = Number($cantidadIntegrantes.value) + const cantidadIntegrantes = Number($cantidadIntegrantes.value); + + const errorIntegrantesIngresados = validarIntegrantesIngresados(cantidadIntegrantes); + + if (errorIntegrantesIngresados) { + console.log(errorIntegrantesIngresados); + return false; + } - if (cantidadIntegrantes <= 0) return false; borrarIntegrantesAnteriores(); crearIntegrantes(cantidadIntegrantes); @@ -18,12 +24,12 @@ document.querySelector("#enviar-cantidad-integrantes").onclick = function () { ocultarResultados(); $cantidadIntegrantes.value = ""; - return false; -} + event.preventDefault(); +}; document.querySelector("#borrar").onclick = function () { resetear(); -} +}; function crearIntegrantes(cantidadIntegrantes) { for (let i = 0; i < cantidadIntegrantes; i++) { @@ -32,7 +38,7 @@ function crearIntegrantes(cantidadIntegrantes) { } function borrarIntegrantesAnteriores() { - const $integrantesAnteriores = document.querySelectorAll(".integrante") + const $integrantesAnteriores = document.querySelectorAll(".integrante"); for (let i = 0; i < $integrantesAnteriores.length; i++) { $integrantesAnteriores[i].remove(); @@ -48,14 +54,52 @@ function ocultarControles() { $divControles.classList.add("hidden"); } -// Recibe un NodeList de inputs de edades y devuelve true si alguna de las edades es inválida -function validarInputsEdadesUsuario(inputsEdades) { - let tieneInputsInvalidos = false; - for (let i = 0; i < inputsEdades.length; i++) { - if (inputsEdades[i].value <= 0) tieneInputsInvalidos = true; +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 tieneInputsInvalidos; + return ""; } function dameMayor(numeros) { @@ -116,21 +160,25 @@ Punto bonus: si hay inputs vacíos, ignorarlos en el cálculo (no contarlos como document.querySelector("#calcular").onclick = function () { const $edadesIntegrantes = document.querySelectorAll(".edad-integrante"); - const $salarioIntegrantes = document.querySelectorAll(".salario-integrante"); - - if (validarInputsEdadesUsuario($edadesIntegrantes)) return false; - + const $salariosIntegrantes = document.querySelectorAll(".salario-integrante"); const edadesIntegrantes = []; - for (let i = 0; i < $edadesIntegrantes.length; i++) { - edadesIntegrantes.push(Number($edadesIntegrantes[i].value)); - } - - const salarioIntegrantes = []; - for (let i = 0; i < $salarioIntegrantes.length; i++) { - if ($salarioIntegrantes[i].value > 0) { - salarioIntegrantes.push(Number($salarioIntegrantes[i].value)); + const salariosIntegrantes = []; + + $edadesIntegrantes.forEach(function ($edadIntegrante) { + // Cada integrante tiene una id "edad-integrante-n", por eso selecciono el ultimo elemento + const numeroIntegrante = $edadIntegrante.id.split("-").pop(); + const edadIntegrante = $edadIntegrante.value; + const errorEdadIntegrante = validarEdad(edadIntegrante); + + if (errorEdadIntegrante) { + console.log(`Para el integrante #${numeroIntegrante}, ${errorEdadIntegrante}`); + } else { + edadesIntegrantes.push(edadIntegrante); } - } + }); + + $salariosIntegrantes.forEach(function ($salarioIntegrante) { + }); document.querySelector("#edad-mayor").textContent = dameMayor(edadesIntegrantes); document.querySelector("#edad-menor").textContent = dameMenor(edadesIntegrantes); @@ -142,7 +190,7 @@ document.querySelector("#calcular").onclick = function () { mostrarResultados(); return false; -} +}; function crearIntegrante(indice) { const $div = document.createElement("div"); @@ -150,7 +198,7 @@ function crearIntegrante(indice) { const $h3 = document.createElement("h3"); $h3.className = "h3"; - $h3.textContent = `Integrante #${indice + 1}:` + $h3.textContent = `Integrante #${indice + 1}:`; const $label = document.createElement("label"); $label.className = "label"; @@ -165,7 +213,7 @@ function crearIntegrante(indice) { const $label2 = document.createElement("label"); $label2.className = "label"; - $label2.htmlFor = `integrante-trabaja-${indice + 1}` + $label2.htmlFor = `integrante-trabaja-${indice + 1}`; $label2.textContent = "Tiene trabajo"; const $inputChkbox = document.createElement("input"); @@ -176,7 +224,7 @@ function crearIntegrante(indice) { $inputChkbox.onclick = function () { generarSalarioIntegrante($inputChkbox); mostrarIngresarSalario($inputChkbox); - } + }; $div.appendChild($h3); $div.appendChild($label);