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