From 77ce3190099b4b43e5b3239f4c5564b57734057c Mon Sep 17 00:00:00 2001 From: romeo Date: Sun, 24 May 2026 18:35:07 -0300 Subject: [PATCH 1/8] ejercicio1 --- clase-9.js | 16 +++++++++++++++- index.html | 3 ++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/clase-9.js b/clase-9.js index 6df1007..3fe8d66 100644 --- a/clase-9.js +++ b/clase-9.js @@ -1 +1,15 @@ -// Agregar acá el código javascript para los ejercicios +// 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. + +let botonClicks = document.querySelector('#boton-clicks'); // almacenamos en las variables el elemento boton y el span con id numero +let spanNumero = (document.querySelector('#numero-clicks')); + +let numeroClicks = parseInt(spanNumero.textContent) // extraemos solamente el textcontent y lo almacenamos en otra variable + +function contarClicks (){ + numeroClicks = numeroClicks+1; + spanNumero.textContent = numeroClicks; //actualizamos el numero dentro del con el nuevo textcontent +}; + +botonClicks.addEventListener('click', contarClicks); //ejecutamos la funcion diff --git a/index.html b/index.html index 2a6b85f..560e39d 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,8 @@

Clase 9 - Eventos

- +

el boton fue clickeado 0 veces

+
-- 2.49.1 From 5b37154dbd224934d0608f0687206f0399b95590 Mon Sep 17 00:00:00 2001 From: romeo Date: Mon, 25 May 2026 02:49:04 -0300 Subject: [PATCH 2/8] ejercicio2 --- clase-9.js | 42 ++++++++++++++++++++++++++++++++++++++++++ index.html | 5 +++++ 2 files changed, 47 insertions(+) diff --git a/clase-9.js b/clase-9.js index 3fe8d66..0bd45e2 100644 --- a/clase-9.js +++ b/clase-9.js @@ -13,3 +13,45 @@ function contarClicks (){ }; botonClicks.addEventListener('click', contarClicks); //ejecutamos la funcion + + +// 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. + +let label = document.querySelector("#label-ej2"); +let cantidadLetras = 0 + +const campo = document.querySelector("#input-ej2"); +campo.addEventListener("input", (e) => { + cantidadLetras = e.target.value.length; + label.textContent = cantidadLetras; + }); + + +// 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). + + + +// 4 Agregar a la página los siguientes elementos: +//
+//
+// +//
+//
+ +// 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. + + + +// 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: + +// document.querySelector("#nombre").value = ""; \ No newline at end of file diff --git a/index.html b/index.html index 560e39d..a7f2dad 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,11 @@
+

Contador de caracteres

+ + + +
-- 2.49.1 From ca02edeef8a203e07f7fb908e35e2c139ac47a7c Mon Sep 17 00:00:00 2001 From: romeo Date: Mon, 25 May 2026 15:24:06 -0300 Subject: [PATCH 3/8] ejercicio3 --- clase-9.js | 17 +++++++++++++++++ index.html | 7 +++++++ 2 files changed, 24 insertions(+) diff --git a/clase-9.js b/clase-9.js index 0bd45e2..566a799 100644 --- a/clase-9.js +++ b/clase-9.js @@ -32,6 +32,23 @@ campo.addEventListener("input", (e) => { // 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). +let ulPaises = document.querySelector('#lista-paises'); // aignamos la ul en una variable +let arrayPaises = document.querySelectorAll('.pais'); // y los li en un array + +ulPaises.addEventListener('click', (e) => { + let paisElegido = e.target; + let listaPaisesNoelegidos =[]; + + paisElegido.classList.replace('pais', 'seleccionado'); //cambiamos la clase del pais seleccionado + + console.log(paisElegido.classList); + for (let item of arrayPaises){ + if (item.classList != 'seleccionado'){ + item.remove(); + } + } + +}) // 4 Agregar a la página los siguientes elementos: diff --git a/index.html b/index.html index a7f2dad..0810351 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,13 @@
+

Elige tu candidato para la copa del mundo:

+
    +
  • Espana
    • +
  • Inglaterra
    • +
  • Francia
    • +
  • Argentina
    • +
-- 2.49.1 From c642dcd1b9ad0363388b54875960907e7e3ac73b Mon Sep 17 00:00:00 2001 From: romeo Date: Mon, 25 May 2026 21:57:03 -0300 Subject: [PATCH 4/8] ejercicio4 --- clase-9.js | 25 +++++++++++++++++++++++-- index.html | 6 ++++++ 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/clase-9.js b/clase-9.js index 566a799..7c01d96 100644 --- a/clase-9.js +++ b/clase-9.js @@ -50,7 +50,6 @@ ulPaises.addEventListener('click', (e) => { }) - // 4 Agregar a la página los siguientes elementos: //
//
@@ -58,7 +57,29 @@ ulPaises.addEventListener('click', (e) => { //
//
-// 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. +// 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. + + +let divExterno = document.querySelector('#externo'); +let divInterno = document.querySelector('#interno'); +let boton = document.querySelector('#boton'); + +divExterno.addEventListener('click' , () =>{ + console.log('externo (primero)') +}, true); + +divInterno.addEventListener('click' , () =>{ + console.log('Interno (tercero)') +}); + +boton.addEventListener('click' , () =>{ + console.log('boton (segundo)') +}); + +// con el tercer argumento true en el listener del div externo el orden queda asi: +// 1ro - divExterno / 2do - boton / 3ro - divInterno / diff --git a/index.html b/index.html index 0810351..b7fb800 100644 --- a/index.html +++ b/index.html @@ -35,6 +35,12 @@
+

Capturing y bubbling

+
+
+ +
+
-- 2.49.1 From 1560afef4fe46641de7019471f4bff30c06c5b03 Mon Sep 17 00:00:00 2001 From: romeo Date: Mon, 25 May 2026 22:22:23 -0300 Subject: [PATCH 5/8] avances en el ejercicio5 (solo html) --- index.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/index.html b/index.html index b7fb800..1380514 100644 --- a/index.html +++ b/index.html @@ -45,6 +45,17 @@
+
+ + +
+ + +
+ + + +
-- 2.49.1 From bdc6a29027202fc059103d5611930f2a092e84a7 Mon Sep 17 00:00:00 2001 From: romeo Date: Tue, 26 May 2026 01:38:20 -0300 Subject: [PATCH 6/8] avances en el js de ejercicio5 --- clase-9.js | 27 ++++++++++++++++++++++++++- index.html | 4 ++-- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/clase-9.js b/clase-9.js index 7c01d96..6411faa 100644 --- a/clase-9.js +++ b/clase-9.js @@ -92,4 +92,29 @@ boton.addEventListener('click' , () =>{ // Para limpiar un campo se puede asignar un string vacío a su propiedad value: -// document.querySelector("#nombre").value = ""; \ No newline at end of file +// document.querySelector("#nombre").value = ""; + +let nombre = document.querySelector('#nombre'); +let edad = document.querySelector('#edad'); +let mensaje = document.querySelector('textarea'); +let enviar = document.querySelector('#enviar'); +let form = document.querySelector('form') + +console.log(nombre.value); + +form.addEventListener('submit' , (e) =>{ + e.preventDefault(); + if (nombre.value.trim() === '') { + console.log('nombre vacio, reintenta'); + return; + } else if (edad.value > 120 || edad.value < 0){ + console.log('edad inverosimil'); + return; + } else if (mensaje.value.trim() === ''){ + console.log('mensaje vacio'); + return; + } + + + console.log("Formulario enviado"); +}); diff --git a/index.html b/index.html index 1380514..d244db9 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,7 @@
-
+
@@ -54,7 +54,7 @@
- +
-- 2.49.1 From bd0f72b70b53e6f1f33c1e302eec50902d45b128 Mon Sep 17 00:00:00 2001 From: romeo Date: Tue, 26 May 2026 15:08:20 -0300 Subject: [PATCH 7/8] as avances en el ejercicio5 --- clase-9.js | 1 + index.html | 3 +++ 2 files changed, 4 insertions(+) diff --git a/clase-9.js b/clase-9.js index 6411faa..0e60461 100644 --- a/clase-9.js +++ b/clase-9.js @@ -106,6 +106,7 @@ form.addEventListener('submit' , (e) =>{ e.preventDefault(); if (nombre.value.trim() === '') { console.log('nombre vacio, reintenta'); + document.querySelector('#error-nombre').textContent = 'error nombre'; return; } else if (edad.value > 120 || edad.value < 0){ console.log('edad inverosimil'); diff --git a/index.html b/index.html index d244db9..3fa1a85 100644 --- a/index.html +++ b/index.html @@ -48,12 +48,15 @@
+
+
+
-- 2.49.1 From f490f4e3d978da84da4a372e9da345571e400ae7 Mon Sep 17 00:00:00 2001 From: Romeo Date: Tue, 26 May 2026 15:58:52 -0300 Subject: [PATCH 8/8] ejercicio5 finalizado --- clase-9.js | 43 +++++++++++++++++++++++++++++-------------- 1 file changed, 29 insertions(+), 14 deletions(-) diff --git a/clase-9.js b/clase-9.js index 0e60461..accf7de 100644 --- a/clase-9.js +++ b/clase-9.js @@ -94,28 +94,43 @@ boton.addEventListener('click' , () =>{ // document.querySelector("#nombre").value = ""; -let nombre = document.querySelector('#nombre'); +let nombre = document.querySelector('#nombre'); // almacenamos en variables los elementos html que necesitamos let edad = document.querySelector('#edad'); let mensaje = document.querySelector('textarea'); let enviar = document.querySelector('#enviar'); let form = document.querySelector('form') -console.log(nombre.value); - -form.addEventListener('submit' , (e) =>{ +form.addEventListener('submit' , (e) =>{ //creamos el listener previniendo el refresh de la pagina e.preventDefault(); - if (nombre.value.trim() === '') { - console.log('nombre vacio, reintenta'); - document.querySelector('#error-nombre').textContent = 'error nombre'; - return; - } else if (edad.value > 120 || edad.value < 0){ - console.log('edad inverosimil'); - return; - } else if (mensaje.value.trim() === ''){ - console.log('mensaje vacio'); + + if (nombre.value.trim() === '') { //si el nombre esta vacio => mensaje error + document.querySelector('#error-nombre').textContent = 'El nombre no puede estar vacio'; + + } else if (edad.value > 120 || edad.value < 0 || edad.value === ""){ // en este else if recibimos todos los errores para despues desglosarlo + if(edad.value > 120 || edad.value < 0){ // si: el numero es negativo o mayor a 120 => "edad invalida" + document.querySelector('#error-edad').textContent = 'edad invalida'; + } + else if (edad.value === ""){ // si la edad esta vacia => error + document.querySelector('#error-edad').textContent = 'El campo "edad" no puede estar vacio'; + } + + + } else if (mensaje.value.trim() === ''){ // si el mensaje esta vacio => error + document.querySelector('#error-mensaje').textContent = 'El mensaje no puede estar vacio'; + } + + if (!(nombre.value.trim() === '' || edad.value > 120 || edad.value < 0 || edad.value === "" || mensaje.value.trim() === '')){ // Si se umplen TODAS las condiciones neesarias => "formulario enviaro" + alert("Formulario enviado"); + document.querySelector("#nombre").value = ""; // borramos todos los valores en blanco al recibir el mensaje de envio de formulario + document.querySelector("#error-nombre").textContent = ""; + document.querySelector("#edad").value = ""; + document.querySelector("#error-edad").textContent = ""; + document.querySelector("#mensaje").value = ""; + document.querySelector("#error-mensaje").textContent = ""; return; } + - console.log("Formulario enviado"); + }); -- 2.49.1