From aea030ff317dbea0eaa70ed32bc4e3012445a24d Mon Sep 17 00:00:00 2001
From: Bruno Dalessandro <dalessandro.bruno1995@gmail.com>
Date: Sun, 24 May 2026 14:29:38 -0300
Subject: [PATCH] Ejercicio 3

---
 clase-9.js | 45 +++++++++++++++++++++++++++++++++++++++++++--
 estilo.css | 14 ++++++++++++++
 index.html |  8 +++++++-
 3 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/clase-9.js b/clase-9.js
index 44fecf1..e04fd24 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -29,7 +29,7 @@ boton.addEventListener("click", () => {
 
     }
 
-})
+});
 
 /*
 
@@ -45,4 +45,45 @@ inputTexto.addEventListener("input", () => {
     let cantidad = inputTexto.value.length;
 
     document.getElementById("cantidadCaracteres").textContent = cantidad;
-})
\ No newline at end of file
+});
+
+/* 
+
+3. Crear una lista con cinco ítems. Usando delegación de eventos, hacer que al
+   hacer clic en cualquier ítem se le agregue la clase `"seleccionado"` y se
+   la quite a los demás (es decir, solo un ítem puede estar seleccionado a la
+   vez).
+
+*/
+
+const lista3 = document.getElementById("lista-nueva");
+
+lista3.addEventListener("click", (evento) => {
+
+    const items = document.querySelectorAll("#lista-nueva li");
+
+    for (const item of items) {
+        
+        item.classList.remove("seleccionado");
+
+    }
+
+    evento.target.classList.add("seleccionado");
+
+
+});
+
+/* 
+
+4. Agregar a la página los siguientes elementos:
+   ```html
+   <div id="externo">
+       <div id="interno">
+           <button>Click</button>
+       </div>
+   </div>
+   ```
+   Registrar listeners de bubbling en los tres elementos y verificar en consola
+   el orden en que se ejecutan al hacer clic en el botón. Luego, agregar un
+   listener de capturing en `#externo` y observar cómo cambia el orden.
+*/
\ No newline at end of file
diff --git a/estilo.css b/estilo.css
index 19d93f8..ae35515 100644
--- a/estilo.css
+++ b/estilo.css
@@ -3,3 +3,17 @@ div {
     padding: 10px;
     margin: 10px;
 }
+
+.seleccionado {
+    background-color: lightblue;
+}
+
+
+/* Le agregue esto para que me aparezca el cursor sobre los items,
+y para que no se pueda seleccionar todos los items como si fuera un texto. Eso hacia que queden todos seleccionados y me rompia el codigo. */
+
+#lista-nueva li {
+    
+    cursor: pointer;
+    user-select: none;
+}
diff --git a/index.html b/index.html
index 009bf60..80e0228 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,13 @@
         </div>
         <hr>
         <div id="ejercicio-3">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
+            <ul id="lista-nueva">
+                <li>item 1</li>
+                <li>item 2</li>
+                <li>item 3</li>
+                <li>item 4</li>
+                <li>item 5</li>
+            </ul>
         </div>
         <hr>
         <div id="ejercicio-4">