clase-9.js

@@ -13,4 +13,16 @@ const resultado = document.querySelector("#resultado");
 campo.addEventListener("input", () => {
     const cantidad = campo.value.length;
     resultado.textContent = `Caracteres: ${cantidad}`;
-})
+})
+
+//ejercicio 3
+const lista = document.querySelector("#lista");
+lista.addEventListener("click", (e) => {
+    if (e.target.tagName === "LI") {
+        const yaSeleccionado = document.querySelector(".seleccionado");
+        if (yaSeleccionado) {
+            yaSeleccionado.classList.remove("seleccionado");
+        }
+        e.target.classList.add("seleccionado");
+    }
+});

estilo.css

@@ -3,3 +3,9 @@ div {
     padding: 10px;
     margin: 10px;
 }
+
+li.seleccionado {
+    background-color: blue;
+    color: white;
+    font-weight: bold;
+}

index.html

@@ -18,7 +18,13 @@
         </div>
         <hr>
         <div id="ejercicio-3">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
+            <ul id="lista">
+                <li>Pan</li>
+                <li>Queso</li>
+                <li>Paleta</li>
+                <li>Sprite</li>
+                <li>Doritos</li>
+            </ul>
         </div>
         <hr>
         <div id="ejercicio-4">