feat: add form validation and submission handling for exercise 5

feat: implement event handling for exercise 4 with capturing and logging
feat: implement item selection functionality in exercise 3
2026-05-20 17:20:46 -03:00 · 2026-05-20 16:24:05 -03:00 · 2026-05-20 16:13:14 -03:00 · 2026-05-20 16:03:21 -03:00 · 2026-05-20 15:44:02 -03:00
3 changed files with 208 additions and 29 deletions
--- a/clase-9.js
+++ b/clase-9.js
@@ -1 +1,115 @@
 // Agregar acá el código javascript para los ejercicios
+
+// Ejercicio 1
+
+const clickCounter = document.getElementById('clickCounter');
+const clickButton = document.getElementById('clickButton');
+
+let count = 0;
+
+clickButton.addEventListener('click', () => {
+    count++;
+    clickCounter.textContent = count;
+});
+
+// Ejercicio 2
+
+const textInput = document.getElementById('textInput');
+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');
+    }
+});
+
+// Ejercicio 4
+
+const outside = document.getElementById('outside');
+const inside = document.getElementById('inside');
+const insideButton = document.getElementById('insideButton');
+
+outside.addEventListener('click', () => {
+    console.log("outside");
+});
+
+inside.addEventListener('click', () => {
+    console.log("inside");
+})
+
+insideButton.addEventListener('click', () => {
+    console.log("button");
+});
+
+outside.addEventListener('click', () => {
+    console.log("outside capturing");
+}, true);
+
+// Ejercicio 5
+
+const userForm = document.getElementById('userForm');
+const nameInput = document.getElementById('nameInput');
+const ageInput = document.getElementById('ageInput');
+const messageInput = document.getElementById('messageInput');
+
+const clearErrors = () => {
+    document.getElementById('nameError').textContent = '';
+    document.getElementById('ageError').textContent = '';
+    document.getElementById('messageError').textContent = '';
+}
+
+const validateForm = () => {
+    let isValid = true;
+
+    if (nameInput.value.trim() === '') {
+        document.getElementById('nameError').textContent = 'El nombre es obligatorio.';
+        isValid = false;
+    }
+
+    const age = parseInt(ageInput.value);
+    if (isNaN(age) || age < 0 || age > 120) {
+        document.getElementById('ageError').textContent = 'La edad debe ser un número entre 0 y 120.';
+        isValid = false;
+    }
+
+    if (messageInput.value.trim() === '') {
+        document.getElementById('messageError').textContent = 'El mensaje es obligatorio.';
+        isValid = false;
+    }
+
+    return isValid;
+}
+
+const showSuccessMessage = () => {
+    alert('Formulario enviado con éxito!');
+}
+
+const clearForm = () => {
+    nameInput.value = '';
+    ageInput.value = '';
+    messageInput.value = '';
+}
+
+const handleSubmit = (event) => {
+    event.preventDefault();
+
+    clearErrors();
+
+    const isValid = validateForm();
+
+    if (isValid) {
+        showSuccessMessage();
+        clearForm();
+}}
+
+userForm.addEventListener('submit', handleSubmit);
--- a/estilo.css
+++ b/estilo.css
@@ -3,3 +3,25 @@ div {
    padding: 10px;
    margin: 10px;
 }
+
+li {
+    cursor: pointer;
+}
+
+.selected {
+    background-color: #007bff;
+    color: white;
+    font-weight: bold;
+    border-radius: 6px;
+    padding: 4px 8px;
+}
+
+.errorMessage {
+    color: red;
+    font-size: 14px;
+}
+
+#successMessage {
+    color: green;
+    font-weight: bold;
+}
--- a/index.html
+++ b/index.html
@@ -1,32 +1,75 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width">
-        <title>Clase 9 - Eventos</title>
-        <link rel="stylesheet" href="estilo.css">
-    </head>
-    <body>
-        <h1>Clase 9 - Eventos</h1>
-        <div id="ejercicio-1">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 1 -->
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Clase 9 - Eventos</title>
+    <link rel="stylesheet" href="estilo.css">
+</head>
+
+<body>
+    <h1>Clase 9 - Eventos</h1>
+    <div id="ejercicio-1">
+        <p> Este boton ha sido clickeado <span id="clickCounter">0</span> veces</p>
+        <button id="clickButton">Clickeame!</button>
+    </div>
+    <hr>
+    <div id="ejercicio-2">
+        <label for="textInput">
+            Esto es un campo de texto, probá escribir en él:
+        </label>
+
+        <input type="text" id="textInput">
+
+        <p>
+            Caracteres ingresados:
+            <span id="charCount">0</span>
+        </p>
+    </div>
+    <hr>
+    <div id="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">
+        <div id="outside">
+            <div id="inside">
+                <button id="insideButton">Click</button>
+            </div>
        </div>
-        <hr>
-        <div id="ejercicio-2">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 2 -->
-        </div>
-        <hr>
-        <div id="ejercicio-3">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
-        </div>
-        <hr>
-        <div id="ejercicio-4">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 4 -->
-        </div>
-        <hr>
-        <div id="ejercicio-5">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 5 -->
-        </div>
-        <script src="clase-9.js"></script>
-    </body>
+    </div>
+    <hr>
+    <div id="ejercicio-5">
+        <form id="userForm">
+
+            <label for="nameInput">Nombre:</label>
+            <input type="text" id="nameInput">
+            <p id="nameError" class="errorMessage"></p>
+
+            <label for="ageInput">Edad:</label>
+            <input type="number" id="ageInput">
+            <p id="ageError" class="errorMessage"></p>
+
+            <label for="messageInput">Mensaje:</label>
+            <textarea id="messageInput"></textarea>
+            <p id="messageError" class="errorMessage"></p>
+
+            <button type="submit">
+                Enviar
+            </button>
+
+            <p id="successMessage"></p>
+
+        </form>
+    </div>
+    <script src="clase-9.js"></script>
+</body>
+
 </html>
Author	SHA1	Message	Date
Facundo Saucedo	b7d5d9a176	feat: add form validation and submission handling for exercise 5	2026-05-20 17:20:46 -03:00
Facundo Saucedo	36afe58c6f	feat: implement event handling for exercise 4 with capturing and logging	2026-05-20 16:24:05 -03:00
Facundo Saucedo	e7d0ca8aa2	feat: implement item selection functionality in exercise 3	2026-05-20 16:13:14 -03:00
Facundo Saucedo	b97fb32d67	feat: add character count functionality to text input	2026-05-20 16:03:21 -03:00
Facundo Saucedo	0b8e8b5bd7	feat: add click counter button interaction	2026-05-20 15:44:02 -03:00