clase-9.js

@@ -20,4 +20,23 @@ const contadorCaracteres = document.querySelector("#cantidadCaracteres");
 
 campo.addEventListener("input", function() {
     contadorCaracteres.textContent = `Cantidad de caracteres: ${campo.value.length}`;
+});
+
+
+
+//Ejercicio 3 de la clase 9"
+
+const lista = document.querySelector("#lista");
+lista.addEventListener("click", function(event) {
+    if (event.target.tagName === "LI") {
+        
+        const items = document.querySelectorAll("#lista li");
+
+        for (const item of items) {
+            item.classList.remove("seleccionado");
+        };
+
+        event.target.classList.add("seleccionado");
+        console.log(event.target.textContent);
+    }
 });

estilo.css

@@ -3,3 +3,8 @@ div {
     padding: 10px;
     margin: 10px;
 }
+
+.seleccionado {
+    background-color: yellow;
+    font-weight: bold;
+}

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">
+                <li>Audi</li>
+                <li>Toyota</li>
+                <li>Chevrolet</li>
+                <li>Ford</li>
+                <li>Nissan</li>
+             </ul>
         </div>
         <hr>
         <div id="ejercicio-4">