diff --git a/ejercicio3/ejercicio3.js b/ejercicio3/ejercicio3.js index 6ce9e92..d2a398e 100644 --- a/ejercicio3/ejercicio3.js +++ b/ejercicio3/ejercicio3.js @@ -1 +1,11 @@ -// Agregar aquí el código javascript +const lista = document.querySelector("#lista"); + +// Un solo listener en la lista, no uno por ítem (delegación de eventos). +lista.addEventListener("click", (e) => { + // Verificamos que el clic fue sobre un
  • . Si fue sobre otro elemento, + // retornamos sin hacer nada. + if (e.target.tagName !== "LI") return; + + // toggle agrega la clase si no la tiene, y la quita si ya la tenía. + e.target.classList.toggle("seleccionado"); +}); diff --git a/ejercicio3/estilo.css b/ejercicio3/estilo.css index 159b7f6..3ebd9a8 100644 --- a/ejercicio3/estilo.css +++ b/ejercicio3/estilo.css @@ -1,2 +1,5 @@ -/* Agregar el código CSS necesario para el ejercicio */ +.seleccionado { + background-color: yellow; + font-weight: bold; +} diff --git a/ejercicio3/index.html b/ejercicio3/index.html index 678d7ee..e75a38f 100644 --- a/ejercicio3/index.html +++ b/ejercicio3/index.html @@ -9,6 +9,15 @@

    Ejercicio 3

    + +