feat: implement item selection functionality in exercise 3

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');
+    }
+});

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;
+}

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">