From e86ab32d2970e32822317e59d97c20935147c99d Mon Sep 17 00:00:00 2001
From: Nery Benincasa <42608796@terciariourquiza.edu.ar>
Date: Thu, 21 May 2026 22:51:26 -0300
Subject: [PATCH] Ejercicio 3

---
 clase-9.js | 24 ++++++++++++++++++++++++
 index.html |  7 +++++++
 2 files changed, 31 insertions(+)

diff --git a/clase-9.js b/clase-9.js
index 0d2dde8..abf5fc7 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -29,4 +29,28 @@ campo.addEventListener("input", function (e) {
     const cantidadCaracteres = textoActual.length;
     // Actualizo el contenido del párrafo
     contadorcaracteres.textContent = `Caracteres ingresados: ${cantidadCaracteres}`;
+});
+
+//EJERCICIO 3
+
+// 1. Seleccionar el elemento padre (la lista)
+const lista = document.querySelector("#lista-items");
+
+// 2. Registrar un único listener en el elemento padre
+lista.addEventListener("click", function (e) {
+
+    // Validar si el elemento exacto que recibió el clic es un <li>
+    if (e.target.tagName === "LI") {
+
+        // Buscar si existe actualmente algún ítem con la clase 'seleccionado'
+        const itemSeleccionadoPrevio = lista.querySelector(".seleccionado");
+
+        // Si se encuentra un ítem seleccionado, se le remueve la clase
+        if (itemSeleccionadoPrevio) {
+            itemSeleccionadoPrevio.classList.remove("seleccionado");
+        }
+
+        // Agregar la clase 'seleccionado' al ítem que disparó el evento
+        e.target.classList.add("seleccionado");
+    }
 });
\ No newline at end of file
diff --git a/index.html b/index.html
index 8ec919f..2884a7f 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +22,13 @@
         <hr>
         <div id="ejercicio-3">
             <!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
+            <ul id="lista-items">
+                <li>Ítem número 1</li>
+                <li>Ítem número 2</li>
+                <li>Ítem número 3</li>
+                <li>Ítem número 4</li>
+                <li>Ítem número 5</li>
+            </ul>
         </div>
         <hr>
         <div id="ejercicio-4">