From 3ccdaea6e94897e5c85d5d4a8e269479bedd96a1 Mon Sep 17 00:00:00 2001 From: Bruno Dalessandro Date: Sat, 23 May 2026 21:58:20 -0300 Subject: [PATCH 1/5] Ejercicio 1 --- clase-9.js | 31 +++++++++++++++++++++++++++++++ index.html | 3 ++- 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/clase-9.js b/clase-9.js index 6df1007..26ff756 100644 --- a/clase-9.js +++ b/clase-9.js @@ -1 +1,32 @@ // Agregar acá el código javascript para los ejercicios + +/* + +1. Agregar a la página un botón y un párrafo que diga `Botón clickeado 0 + veces`. Cada vez que se haga clic en el botón, el texto del párrafo debe + cambiar al mensaje `"Botón clickeado N veces"`, donde N es el número de + veces que se hizo clic. + +*/ + +const boton = document.getElementById("boton"); + +boton.addEventListener("click", () => { + + let contador = parseInt(document.getElementById("cantidad").textContent); + + contador = contador + 1; + + document.getElementById("cantidad").textContent = contador; + + if (contador === 1) { + + document.getElementById("descripcionCantidad").textContent = "vez."; + + } else { + + document.getElementById("descripcionCantidad").textContent = "veces."; + + } + +}) \ No newline at end of file diff --git a/index.html b/index.html index 2a6b85f..8abeff5 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,8 @@

Clase 9 - Eventos

- +

Boton clickeado 0 veces.

+
-- 2.49.1 From c95ca3ed74de6d0594d6592e9dbbbb600379d21b Mon Sep 17 00:00:00 2001 From: Bruno Dalessandro Date: Sat, 23 May 2026 22:07:36 -0300 Subject: [PATCH 2/5] Ejercicio 2 --- clase-9.js | 18 +++++++++++++++++- index.html | 7 ++++++- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/clase-9.js b/clase-9.js index 26ff756..44fecf1 100644 --- a/clase-9.js +++ b/clase-9.js @@ -26,7 +26,23 @@ boton.addEventListener("click", () => { } else { document.getElementById("descripcionCantidad").textContent = "veces."; - + } +}) + +/* + +2. Agregar un campo de texto a la página. A medida que el usuario escribe, + mostrar en tiempo real la cantidad de caracteres ingresados debajo del campo. + +*/ + +const inputTexto = document.getElementById("texto"); + +inputTexto.addEventListener("input", () => { + + let cantidad = inputTexto.value.length; + + document.getElementById("cantidadCaracteres").textContent = cantidad; }) \ No newline at end of file diff --git a/index.html b/index.html index 8abeff5..009bf60 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,12 @@
- + + +

+ Cantidad de caracteres: + 0 +

-- 2.49.1 From aea030ff317dbea0eaa70ed32bc4e3012445a24d Mon Sep 17 00:00:00 2001 From: Bruno Dalessandro Date: Sun, 24 May 2026 14:29:38 -0300 Subject: [PATCH 3/5] Ejercicio 3 --- clase-9.js | 45 +++++++++++++++++++++++++++++++++++++++++++-- estilo.css | 14 ++++++++++++++ index.html | 8 +++++++- 3 files changed, 64 insertions(+), 3 deletions(-) diff --git a/clase-9.js b/clase-9.js index 44fecf1..e04fd24 100644 --- a/clase-9.js +++ b/clase-9.js @@ -29,7 +29,7 @@ boton.addEventListener("click", () => { } -}) +}); /* @@ -45,4 +45,45 @@ inputTexto.addEventListener("input", () => { let cantidad = inputTexto.value.length; document.getElementById("cantidadCaracteres").textContent = cantidad; -}) \ No newline at end of file +}); + +/* + +3. Crear una lista con cinco ítems. Usando delegación de eventos, hacer que al + hacer clic en cualquier ítem se le agregue la clase `"seleccionado"` y se + la quite a los demás (es decir, solo un ítem puede estar seleccionado a la + vez). + +*/ + +const lista3 = document.getElementById("lista-nueva"); + +lista3.addEventListener("click", (evento) => { + + const items = document.querySelectorAll("#lista-nueva li"); + + for (const item of items) { + + item.classList.remove("seleccionado"); + + } + + evento.target.classList.add("seleccionado"); + + +}); + +/* + +4. Agregar a la página los siguientes elementos: + ```html +
+
+ +
+
+ ``` + Registrar listeners de bubbling en los tres elementos y verificar en consola + el orden en que se ejecutan al hacer clic en el botón. Luego, agregar un + listener de capturing en `#externo` y observar cómo cambia el orden. +*/ \ No newline at end of file diff --git a/estilo.css b/estilo.css index 19d93f8..ae35515 100644 --- a/estilo.css +++ b/estilo.css @@ -3,3 +3,17 @@ div { padding: 10px; margin: 10px; } + +.seleccionado { + background-color: lightblue; +} + + +/* Le agregue esto para que me aparezca el cursor sobre los items, +y para que no se pueda seleccionar todos los items como si fuera un texto. Eso hacia que queden todos seleccionados y me rompia el codigo. */ + +#lista-nueva li { + + cursor: pointer; + user-select: none; +} diff --git a/index.html b/index.html index 009bf60..80e0228 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,13 @@
- +
-- 2.49.1 From 248c29b43b62b0a61b0813e92ff9f8c177d3bbf2 Mon Sep 17 00:00:00 2001 From: Bruno Dalessandro Date: Mon, 25 May 2026 08:03:19 -0300 Subject: [PATCH 4/5] Ejercicio 4 --- clase-9.js | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 11 ++++++++++- 2 files changed, 65 insertions(+), 1 deletion(-) diff --git a/clase-9.js b/clase-9.js index e04fd24..684cd65 100644 --- a/clase-9.js +++ b/clase-9.js @@ -86,4 +86,59 @@ lista3.addEventListener("click", (evento) => { Registrar listeners de bubbling en los tres elementos y verificar en consola el orden en que se ejecutan al hacer clic en el botón. Luego, agregar un listener de capturing en `#externo` y observar cómo cambia el orden. +*/ + +// bubbling: + +const externoBub = document.getElementById("externoBub"); +const internoBub = document.getElementById("internoBub"); +const botonBub = document.getElementById("botonBub"); + +externoBub.addEventListener("click", () => { + console.log("DIV EXTERNO"); +}); + +internoBub.addEventListener("click", () => { + console.log("DIV INTERNO"); +}); + +botonBub.addEventListener("click", () => { + console.log("BOTON"); +}); + +// Capturing + + +const externoCap = document.getElementById("externoCap"); +const internoCap = document.getElementById("internoCap"); +const botonCap = document.getElementById("botonCap"); + +externoCap.addEventListener("click", () => { + console.log("DIV EXTERNO"); +}, true); + +internoCap.addEventListener("click", () => { + console.log("DIV INTERNO"); +}, true); + +botonCap.addEventListener("click", () => { + console.log("BOTON"); +}, true); + +/* + +5. Crear un formulario con los campos nombre, edad y mensaje (textarea). Al + enviarlo: + + - Verificar que ningún campo esté vacío. + - Verificar que la edad sea un número entero positivo, menor que 120. + - Si hay errores, mostrarlos en la página junto al campo correspondiente. + - Si todo es válido, mostrar un mensaje de éxito y limpiar el formulario. + + Para limpiar un campo se puede asignar un string vacío a su propiedad + `value`: + + ```js + document.querySelector("#nombre").value = ""; + ``` */ \ No newline at end of file diff --git a/index.html b/index.html index 80e0228..8688bfb 100644 --- a/index.html +++ b/index.html @@ -33,7 +33,16 @@
- +
+
+ +
+
+
+
+ +
+
-- 2.49.1 From 8a9b565164851109f2f827c485848b71f568116f Mon Sep 17 00:00:00 2001 From: Bruno Dalessandro Date: Wed, 27 May 2026 15:41:49 -0300 Subject: [PATCH 5/5] Ejercicio 5 --- clase-9.js | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 17 ++++++++++-- 2 files changed, 91 insertions(+), 3 deletions(-) diff --git a/clase-9.js b/clase-9.js index 684cd65..5844ae5 100644 --- a/clase-9.js +++ b/clase-9.js @@ -141,4 +141,79 @@ botonCap.addEventListener("click", () => { ```js document.querySelector("#nombre").value = ""; ``` -*/ \ No newline at end of file +*/ + + + +function validarNombre() { + + const nombre = document.getElementById("nombre").value; + if (nombre.trim() === "") { + document.getElementById("errorNombre").textContent="El campo nombre no puede estar vacio"; + return false; + } + + document.getElementById("errorNombre").textContent = ""; + return true; + +} + +function validarEdad() { + + const edadTexto = document.getElementById("edad").value; + + if (edadTexto.trim() === "") { + + document.getElementById("errorEdad").textContent = "Escribir la edad"; + return false; + } + + const edad = parseInt(edadTexto); + + if (isNaN(edad)) { + document.getElementById("errorEdad").textContent = "La edad no puede ser un texto"; + return false; + } + if (edad <= 0 || edad >= 120) { + document.getElementById("errorEdad").textContent = "Edad invalida"; + return false; + } + document.getElementById("errorEdad").textContent = ""; + return true; + +} + +function validarMensaje () { + + const mensaje = document.getElementById("mensaje").value; + + if (mensaje.trim() === "") { + + document.getElementById("errorMensaje").textContent = "El mensaje no puede estar vacio"; + return false; + } + + document.getElementById("errorMensaje").textContent = ""; + return true; + +} + +const form = document.querySelector("#formulario") +form.addEventListener("submit", (evento) => { + + evento.preventDefault(); + + const nombreValido = validarNombre(); + const edadValida = validarEdad(); + const mensajeValido = validarMensaje(); + + if (nombreValido && edadValida && mensajeValido) { + + document.getElementById("exito").textContent = "Formulario enviado correctamente"; + document.getElementById("nombre").value = ""; + document.getElementById("edad").value = ""; + document.getElementById("mensaje").value = ""; + + } + +}); \ No newline at end of file diff --git a/index.html b/index.html index 8688bfb..d284de2 100644 --- a/index.html +++ b/index.html @@ -46,8 +46,21 @@
- -
+
+ + +

+
+ +

+
+ +

+
+ +
+ +

-- 2.49.1