From e7d0ca8aa22e90c513bf3af1a5a9bede4cdf76ef Mon Sep 17 00:00:00 2001
From: Facundo Saucedo <43495919@terciariourquiza.edu.ar>
Date: Wed, 20 May 2026 16:13:14 -0300
Subject: [PATCH] feat: implement item selection functionality in exercise 3

---
 clase-9.js | 12 ++++++++++++
 estilo.css | 12 ++++++++++++
 index.html | 14 ++++++++++++--
 3 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/clase-9.js b/clase-9.js
index 1ce769c..0695dcf 100644
--- a/clase-9.js
+++ b/clase-9.js
@@ -20,3 +20,15 @@ const charCount = document.getElementById('charCount');
 textInput.addEventListener('input', () => {
     charCount.textContent = textInput.value.length;
 });
+
+// Ejercicio 3
+
+const itemList = document.getElementById('itemList');
+
+itemList.addEventListener('click', (event) => {
+    if (event.target.tagName === 'LI') {
+        const items = itemList.querySelectorAll('li');
+        items.forEach(item => item.classList.remove('selected'));
+        event.target.classList.add('selected');
+    }
+});
diff --git a/estilo.css b/estilo.css
index 19d93f8..e0ce57c 100644
--- a/estilo.css
+++ b/estilo.css
@@ -3,3 +3,15 @@ div {
     padding: 10px;
     margin: 10px;
 }
+
+li {
+    cursor: pointer;
+}
+
+.selected {
+    background-color: #007bff;
+    color: white;
+    font-weight: bold;
+    border-radius: 6px;
+    padding: 4px 8px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index c8b10b9..768e3fa 100644
--- a/index.html
+++ b/index.html
@@ -29,11 +29,21 @@
     </div>
     <hr>
     <div id="ejercicio-3">
-        <!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
+        <ul id="itemList">
+            <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">
-        <!-- Agregar acá el código HTML que haga falta para el ejercicio 4 -->
+        <div id="externo">
+            <div id="interno">
+                <button>Click</button>
+            </div>
+        </div>
     </div>
     <hr>
     <div id="ejercicio-5">