From 94cb1595d1685de933619d3d7c897423fa1e8cfd Mon Sep 17 00:00:00 2001 From: Lucio Gaibazzi Date: Sat, 30 May 2026 20:29:41 -0300 Subject: [PATCH 1/5] Agrega ejercicio 1 de la clase 9 --- clase-9.js | 11 +++++++++++ index.html | 2 ++ 2 files changed, 13 insertions(+) diff --git a/clase-9.js b/clase-9.js index 6df1007..83dca61 100644 --- a/clase-9.js +++ b/clase-9.js @@ -1 +1,12 @@ // Agregar acá el código javascript para los ejercicios + +//Ejercicio 1 de la clase 9 + +let clicks = 0; +const boton = document.querySelector("#botonEjc1"); +const parrafo = document.querySelector("#textoContador"); + +boton.addEventListener("click", function(){ + clicks++; + parrafo.textContent = `Botón clickeado ${clicks} veces`; +}); \ No newline at end of file diff --git a/index.html b/index.html index 2a6b85f..003ccda 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,8 @@

Clase 9 - Eventos

+ +

Botón clickeado 0 veces

-- 2.49.1 From f8ec466ac7d388c0a9678eb4b8fbde7a5419cd8b Mon Sep 17 00:00:00 2001 From: Lucio Gaibazzi Date: Sat, 30 May 2026 20:59:27 -0300 Subject: [PATCH 2/5] Agrega ejercicio 2 de la clase 9 --- clase-9.js | 11 +++++++++++ index.html | 2 ++ 2 files changed, 13 insertions(+) diff --git a/clase-9.js b/clase-9.js index 83dca61..2420256 100644 --- a/clase-9.js +++ b/clase-9.js @@ -9,4 +9,15 @@ const parrafo = document.querySelector("#textoContador"); boton.addEventListener("click", function(){ clicks++; parrafo.textContent = `Botón clickeado ${clicks} veces`; +}); + + + +//Ejercicio 2 de la clase 9 + +const campo = document.querySelector("#texto"); +const contadorCaracteres = document.querySelector("#cantidadCaracteres"); + +campo.addEventListener("input", function() { + contadorCaracteres.textContent = `Cantidad de caracteres: ${campo.value.length}`; }); \ No newline at end of file diff --git a/index.html b/index.html index 003ccda..22e35d3 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,8 @@
+ +

Cantidad de caracteres: 0

-- 2.49.1 From 1b5e549a8f4cea0e3b7c1ca5249e8b386036dcc0 Mon Sep 17 00:00:00 2001 From: Lucio Gaibazzi Date: Sat, 30 May 2026 22:00:14 -0300 Subject: [PATCH 3/5] Agrega ejercicio 3 de la clase 9 --- clase-9.js | 19 +++++++++++++++++++ estilo.css | 5 +++++ index.html | 7 +++++++ 3 files changed, 31 insertions(+) diff --git a/clase-9.js b/clase-9.js index 2420256..f6f0063 100644 --- a/clase-9.js +++ b/clase-9.js @@ -20,4 +20,23 @@ const contadorCaracteres = document.querySelector("#cantidadCaracteres"); campo.addEventListener("input", function() { contadorCaracteres.textContent = `Cantidad de caracteres: ${campo.value.length}`; +}); + + + +//Ejercicio 3 de la clase 9" + +const lista = document.querySelector("#lista"); +lista.addEventListener("click", function(event) { + if (event.target.tagName === "LI") { + + const items = document.querySelectorAll("#lista li"); + + for (const item of items) { + item.classList.remove("seleccionado"); + }; + + event.target.classList.add("seleccionado"); + console.log(event.target.textContent); + } }); \ No newline at end of file diff --git a/estilo.css b/estilo.css index 19d93f8..658df39 100644 --- a/estilo.css +++ b/estilo.css @@ -3,3 +3,8 @@ div { padding: 10px; margin: 10px; } + +.seleccionado { + background-color: yellow; + font-weight: bold; +} diff --git a/index.html b/index.html index 22e35d3..15bcbd7 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,13 @@
+
    +
  • Audi
    • +
  • Toyota
    • +
  • Chevrolet
    • +
  • Ford
    • +
  • Nissan
    • +
-- 2.49.1 From 420a385a478637d5405dfee401a43cf10b3466b4 Mon Sep 17 00:00:00 2001 From: Lucio Gaibazzi Date: Sun, 31 May 2026 23:54:33 -0300 Subject: [PATCH 4/5] Agrego ejercicio 4 de la clase 9 --- clase-9.js | 36 +++++++++++++++++++++++++++++++++++- index.html | 5 +++++ 2 files changed, 40 insertions(+), 1 deletion(-) diff --git a/clase-9.js b/clase-9.js index f6f0063..a7e0158 100644 --- a/clase-9.js +++ b/clase-9.js @@ -39,4 +39,38 @@ lista.addEventListener("click", function(event) { event.target.classList.add("seleccionado"); console.log(event.target.textContent); } -}); \ No newline at end of file +}); + + + +//Ejercicio 4 de la clase 9 +//Fase de Bubbling +const externo1 = document.querySelector("#externo"); +externo1.addEventListener("click", function() { + console.log("externo"); +}); + +const interno1 = document.querySelector("#interno"); +interno1.addEventListener("click", function() { + console.log("interno"); +}); + +const boton1 = document.querySelector("#botón"); +boton1.addEventListener("click", function() { + console.log("botón"); +}); +//Se visualiza en consola como: +//botón +//interno +//externo + + +//Fase de Capturing solamente en #externo +externo1.addEventListener("click", function() { + console.log("externo - capturing"); +}, true); +//Se visualiza en consola como: +//externo - capturing +//botón +//interno +//externo \ No newline at end of file diff --git a/index.html b/index.html index 15bcbd7..03105ed 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,11 @@
+
+
+ +
+
-- 2.49.1 From c56c9e8be84fe46f45d6eec11432cfae714b011c Mon Sep 17 00:00:00 2001 From: Lucio Gaibazzi Date: Mon, 1 Jun 2026 02:13:26 -0300 Subject: [PATCH 5/5] Agrega ejercicio 5 de la clase 9 --- clase-9.js | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++- estilo.css | 8 ++++++++ index.html | 18 +++++++++++++++++ 3 files changed, 84 insertions(+), 1 deletion(-) diff --git a/clase-9.js b/clase-9.js index a7e0158..cd1d50b 100644 --- a/clase-9.js +++ b/clase-9.js @@ -73,4 +73,61 @@ externo1.addEventListener("click", function() { //externo - capturing //botón //interno -//externo \ No newline at end of file +//externo + + + +//Ejercicio 5 de la clase 9 + +const form = document.querySelector("#formulario"); +form.addEventListener("submit", function(event) { + event.preventDefault(); + + const nombre = document.querySelector("#nombre").value; + const edad = document.querySelector("#edad").value; + const mensaje = document.querySelector("#mensaje").value; + + const errorNombre = document.querySelector("#errorNombre"); + const errorEdad = document.querySelector("#errorEdad"); + const errorMensaje = document.querySelector("#errorMensaje"); + + const resultado = document.querySelector("#resultado"); + + errorNombre.textContent = ""; + errorEdad.textContent = ""; + errorMensaje.textContent = ""; + resultado.textContent = ""; + + if (nombre.trim() === "") { + errorNombre.textContent = "El nombre no puede estar vacío."; + errorNombre.classList.add("visible"); + return; + } + + errorNombre.classList.remove("visible"); + + if (edad.trim() === "") { + errorEdad.textContent = "La edad no puede estar vacía."; + errorEdad.classList.add("visible"); + return; + } else if (isNaN(edad) || edad <= 0 || edad >= 120) { + errorEdad.textContent = "La edad debe ser un número mayor que 0 y menor que 120"; + errorEdad.classList.add("visible"); + return; + } + + errorEdad.classList.remove("visible"); + + if(mensaje.trim() === "") { + errorMensaje.textContent = "El mensaje no puede estar vacío."; + errorMensaje.classList.add("visible") + return; + } + errorMensaje.classList.remove("visible"); + + resultado.textContent = "Formulario enviado con éxito."; + + document.querySelector("#nombre").value = ""; + document.querySelector("#edad").value = ""; + document.querySelector("#mensaje").value = ""; +}); \ No newline at end of file diff --git a/estilo.css b/estilo.css index 658df39..dae03e4 100644 --- a/estilo.css +++ b/estilo.css @@ -8,3 +8,11 @@ div { background-color: yellow; font-weight: bold; } + +.error { + color: red; +} + +.visible{ + display: block; +} diff --git a/index.html b/index.html index 03105ed..179a478 100644 --- a/index.html +++ b/index.html @@ -42,6 +42,24 @@
+
+ + +

+ + + +

+ + + +

+ + + +
+ +

-- 2.49.1