ejercicio 5: formulario con validaciones y eventos

clase-9.js

@@ -1 +1,111 @@
-// Agregar acá el código javascript para los ejercicios
+// Ejercicio 1 - Contador de clics
+let clickCount = 0;
+const boton = document.getElementById('miBoton');
+const parrafo = document.getElementById('contadorClicks');
+
+boton.addEventListener('click', function() {
+    clickCount++;
+    parrafo.textContent = `Botón clickeado ${clickCount} veces`;
+});
+
+// Ejercicio 2 - Contador de caracteres en tiempo real
+const campoTexto = document.getElementById('campoTexto');
+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');
+});
+
+// Ejercicio 4 - Bubbling y capturing
+const externo = document.getElementById('externo');
+const interno = document.getElementById('interno');
+const botonCaptura = document.getElementById('botonCaptura');
+
+externo.addEventListener('click', function() {
+    console.log('bubbling: externo');
+});
+
+interno.addEventListener('click', function() {
+    console.log('bubbling: interno');
+});
+
+botonCaptura.addEventListener('click', function() {
+    console.log('bubbling: button');
+});
+
+externo.addEventListener('click', function() {
+    console.log('capturing: externo');
+}, true);
+
+// Ejercicio 5 - Validación de formulario
+const formulario = document.getElementById('formulario');
+const nombreInput = document.getElementById('nombre');
+const edadInput = document.getElementById('edad');
+const mensajeInput = document.getElementById('mensaje');
+const errorNombre = document.getElementById('errorNombre');
+const errorEdad = document.getElementById('errorEdad');
+const errorMensaje = document.getElementById('errorMensaje');
+const formResultado = document.getElementById('formResultado');
+
+function limpiarErrores() {
+    errorNombre.textContent = '';
+    errorEdad.textContent = '';
+    errorMensaje.textContent = '';
+    formResultado.textContent = '';
+}
+
+formulario.addEventListener('submit', function(event) {
+    event.preventDefault();
+    limpiarErrores();
+
+    let esValido = true;
+    const nombre = nombreInput.value.trim();
+    const edadValor = edadInput.value.trim();
+    const mensaje = mensajeInput.value.trim();
+
+    if (!nombre) {
+        errorNombre.textContent = 'El nombre no puede estar vacío.';
+        esValido = false;
+    }
+
+    if (!edadValor) {
+        errorEdad.textContent = 'La edad no puede estar vacía.';
+        esValido = false;
+    } else if (!/^[0-9]+$/.test(edadValor)) {
+        errorEdad.textContent = 'La edad debe ser un número entero positivo.';
+        esValido = false;
+    } else {
+        const edad = parseInt(edadValor, 10);
+        if (edad <= 0 || edad >= 120) {
+            errorEdad.textContent = 'La edad debe ser mayor que 0 y menor que 120.';
+            esValido = false;
+        }
+    }
+
+    if (!mensaje) {
+        errorMensaje.textContent = 'El mensaje no puede estar vacío.';
+        esValido = false;
+    }
+
+    if (esValido) {
+        formResultado.textContent = 'Formulario enviado con éxito.';
+        nombreInput.value = '';
+        edadInput.value = '';
+        mensajeInput.value = '';
+    }
+});

estilo.css

@@ -3,3 +3,33 @@ 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;
+}
+
+.error {
+    color: #b30000;
+    font-size: 0.9em;
+    display: block;
+    margin-top: 4px;
+}
+
+.success {
+    color: #0a6f0a;
+    font-weight: bold;
+    margin-top: 10px;
+}

index.html

@@ -9,23 +9,54 @@
     <body>
         <h1>Clase 9 - Eventos</h1>
         <div id="ejercicio-1">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 1 -->
+            <button id="miBoton">Hacer clic</button>
+            <p id="contadorClicks">Botón clickeado 0 veces</p>
         </div>
         <hr>
         <div id="ejercicio-2">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 2 -->
+            <label for="campoTexto">Escribe algo:</label>
+            <input type="text" id="campoTexto" />
+            <p id="contadorCaracteres">Caracteres ingresados: 0</p>
         </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">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 4 -->
+            <div id="externo">
+                <div id="interno">
+                    <button id="botonCaptura">Click</button>
+                </div>
+            </div>
         </div>
         <hr>
         <div id="ejercicio-5">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 5 -->
+            <form id="formulario">
+                <div>
+                    <label for="nombre">Nombre:</label>
+                    <input type="text" id="nombre" />
+                    <span class="error" id="errorNombre"></span>
+                </div>
+                <div>
+                    <label for="edad">Edad:</label>
+                    <input type="text" id="edad" />
+                    <span class="error" id="errorEdad"></span>
+                </div>
+                <div>
+                    <label for="mensaje">Mensaje:</label>
+                    <textarea id="mensaje"></textarea>
+                    <span class="error" id="errorMensaje"></span>
+                </div>
+                <button type="submit">Enviar</button>
+            </form>
+            <p class="success" id="formResultado"></p>
         </div>
         <script src="clase-9.js"></script>
     </body>