Ejercicio 3

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");
+    }
 });

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">