From afda7e5f0d2fd64197be0f8db2e7ecabfb781db2 Mon Sep 17 00:00:00 2001
From: Sergio Madera De Marco <37299705@terciariourquiza.edu.ar>
Date: Sun, 24 May 2026 14:50:02 -0300
Subject: [PATCH] ejercicio 3: seleccion de elementos con delegacion de eventos

---
 clase-9.js | 15 +++++++++++++++
 estilo.css | 18 ++++++++++++++++++
 index.html |  8 +++++++-
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/clase-9.js b/clase-9.js
index 4b40054..131673e 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -15,3 +15,18 @@ const contadorCaracteres = document.getElementById('contadorCaracteres');
 campoTexto.addEventListener('input', function() {
     contadorCaracteres.textContent = `Caracteres ingresados: ${campoTexto.value.length}`;
 });
+
+// Ejercicio 3 - Selección única en la lista con delegación de eventos
+const listaItems = document.getElementById('listaItems');
+
+listaItems.addEventListener('click', function(event) {
+    const item = event.target.closest('li');
+    if (!item || !listaItems.contains(item)) {
+        return;
+    }
+
+    listaItems.querySelectorAll('li').forEach(function(li) {
+        li.classList.remove('seleccionado');
+    });
+    item.classList.add('seleccionado');
+});
diff --git a/estilo.css b/estilo.css
index 19d93f8..f4f6680 100644
--- a/estilo.css
+++ b/estilo.css
@@ -3,3 +3,21 @@ div {
     padding: 10px;
     margin: 10px;
 }
+
+#listaItems {
+    list-style: none;
+    padding: 0;
+}
+
+#listaItems li {
+    cursor: pointer;
+    padding: 6px;
+    margin: 4px 0;
+    border: 1px solid #8a8a8a;
+}
+
+#listaItems li.seleccionado {
+    background-color: #7daa3c;
+    color: #ffffff;
+}
+
diff --git a/index.html b/index.html
index 389860b..8213110 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,13 @@
         </div>
         <hr>
         <div id="ejercicio-3">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
+            <ul id="listaItems">
+                <li>Ítem 1</li>
+                <li>Ítem 2</li>
+                <li>Ítem 3</li>
+                <li>Ítem 4</li>
+                <li>Ítem 5</li>
+            </ul>
         </div>
         <hr>
         <div id="ejercicio-4">