Ejercicio 5

clase-9.js

@@ -1 +1,157 @@
 // Agregar acá el código javascript para los ejercicios
+
+//EJERCICIO 1
+// 1. Inicialización del estado
+let contador = 0;
+
+// 2. Selecciono los elementos del DOM
+const boton = document.getElementById('boton-contador');
+const parrafo = document.getElementById('texto-contador');
+
+// 3. Registro del Event Listener utilizando una función clásica
+boton.addEventListener('click', function () {
+    // Incremento el valor de la variable en 1
+    contador++;
+    // Actualizo el contenido de texto del párrafo
+    parrafo.textContent = `Botón clickeado ${contador} veces.`;
+});
+
+//EJERCICIO 2
+// 1. Selección de los elementos del DOM
+const campo = document.querySelector("#campo-texto");
+const contadorcaracteres = document.querySelector("#contador-caracteres");
+
+// 2. Registro del Event Listener utilizando una función clásica
+campo.addEventListener("input", function (e) {
+    // Obtengo el texto actual del campo
+    const textoActual = e.target.value;
+    // Calculo la longitud del texto
+    const cantidadCaracteres = textoActual.length;
+    // Actualizo el contenido del párrafo
+    contadorcaracteres.textContent = `Caracteres ingresados: ${cantidadCaracteres}`;
+});
+
+//EJERCICIO 3
+
+// 1. Selecciono el elemento padre (la lista)
+const lista = document.querySelector("#lista-items");
+
+// 2. Registro un único listener en el elemento padre
+lista.addEventListener("click", function (e) {
+    // Valido si el elemento exacto que recibió el clic es un <li>
+    if (e.target.tagName === "LI") {
+        // Busco si existe actualmente algún ítem con la clase 'seleccionado'
+        const itemSeleccionadoPrevio = lista.querySelector(".seleccionado");
+        // Si se encuentra un ítem seleccionado, se le remueve la clase
+        if (itemSeleccionadoPrevio) {
+            itemSeleccionadoPrevio.classList.remove("seleccionado");
+        }
+        // Agrego la clase 'seleccionado' al ítem que disparó el evento
+        e.target.classList.add("seleccionado");
+    }
+});
+
+//EJERCICIO 4
+
+// 1. Selecciono los tres elementos del DOM utilizando sus IDs y etiquetas
+const externo = document.querySelector("#externo");
+const interno = document.querySelector("#interno");
+const botonej4 = document.querySelector("#boton-ej4");
+
+// 2. Registro de un listener en fase de Capturing (Descenso). Al pasar 'true' como tercer argumento, este código se ejecuta primero,
+// cuando el evento baja desde la raíz del DOM hacia el botón.
+externo.addEventListener("click", function () {
+    console.log("externo capturing");
+}, true);
+
+// 3. Registro de listeners en fase de Bubbling (Ascenso)
+// Estos listeners no tienen un tercer argumento (o es 'false' por defecto),
+// por lo que se ejecutan cuando el evento sube desde el elemento origen.
+botonej4.addEventListener("click", function () {
+    console.log("boton");
+});
+
+interno.addEventListener("click", function () {
+    console.log("interno");
+});
+
+externo.addEventListener("click", function () {
+    console.log("externo");
+});
+
+//EJERCICIO 5
+
+// 1. Selecciono el formulario y contenedores globales del DOM
+const formulario = document.querySelector("#formulario-contacto");
+const mensajeExito = document.querySelector("#mensaje-exito");
+
+// 2. Registro el Event Listener para el evento "submit"
+formulario.addEventListener("submit", function (e) {
+    // Evito el comportamiento por defecto de recargar la página
+    e.preventDefault();
+
+    // 3. Selecciono los elementos de entrada de datos
+    const inputNombre = document.querySelector("#nombre");
+    const inputEdad = document.querySelector("#edad");
+    const inputMensaje = document.querySelector("#mensaje");
+
+    // 4. Selecciono los elementos contenedores de error
+    const errorNombre = document.querySelector("#error-nombre");
+    const errorEdad = document.querySelector("#error-edad");
+    const errorMensaje = document.querySelector("#error-mensaje");
+
+    // 5. Obtengo y limpio los valores ingresados (eliminando espacios)
+    const nombreVal = inputNombre.value.trim();
+    const edadVal = inputEdad.value.trim();
+    const mensajeVal = inputMensaje.value.trim();
+
+    // Variable de control para el estado de la validación
+    let formularioValido = true;
+
+    // 6. Limpio mensajes de error anteriores y el mensaje de éxito
+    errorNombre.textContent = "";
+    errorEdad.textContent = "";
+    errorMensaje.textContent = "";
+    mensajeExito.style.display = "none";
+    mensajeExito.textContent = "";
+
+    // 7. Valido el campo Nombre (No vacío)
+    if (nombreVal === "") {
+        errorNombre.textContent = "El nombre no puede estar vacío.";
+        formularioValido = false;
+    }
+
+    // 8. Valido el campo Edad (No vacío, entero positivo y menor a 120)
+    // Convierto el string a número entero para las comprobaciones numéricas
+    const edadEntero = parseInt(edadVal, 10);
+
+    if (edadVal === "") {
+        errorEdad.textContent = "La edad no puede estar vacía.";
+        formularioValido = false;
+    } else if (isNaN(edadEntero) || Number(edadVal) !== edadEntero || edadEntero <= 0) {
+        // Valida que sea un número válido, que no tenga decimales y sea mayor a 0
+        errorEdad.textContent = "La edad debe ser un número entero positivo.";
+        formularioValido = false;
+    } else if (edadEntero >= 120) {
+        errorEdad.textContent = "La edad debe ser menor que 120.";
+        formularioValido = false;
+    }
+
+    // 9. Valido el campo Mensaje (No vacío)
+    if (mensajeVal === "") {
+        errorMensaje.textContent = "El mensaje no puede estar vacío.";
+        formularioValido = false;
+    }
+
+    // 10. Si todos los campos son válidos, proceso el formulario
+    if (formularioValido) {
+        // Muestro mensaje de éxito en la página
+        mensajeExito.textContent = "¡Formulario enviado con éxito!";
+        mensajeExito.style.display = "block";
+
+        // Limpio el contenido de cada uno de los campos expuestos del formulario
+        inputNombre.value = "";
+        inputEdad.value = "";
+        inputMensaje.value = "";
+    }
+});

index.html

@@ -10,22 +10,57 @@
         <h1>Clase 9 - Eventos</h1>
         <div id="ejercicio-1">
             <!-- Agregar acá el código HTML que haga falta para el ejercicio 1 -->
+            <button id="boton-contador">Hacer clic aquí</button>
+            <p id="texto-contador">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 -->
+            <input type="text" id="campo-texto" placeholder="Escribe algo aquí...">
+            <p id="contador-caracteres">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="lista-items">
+                <li>Ítem número 1</li>
+                <li>Ítem número 2</li>
+                <li>Ítem número 3</li>
+                <li>Ítem número 4</li>
+                <li>Ítem número 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="boton-ej4">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-contacto">
+                <div>
+                    <label for="nombre">Nombre:</label>
+                    <input type="text" id="nombre">
+                    <span id="error-nombre" class="mensaje-error"></span>
+                </div>
+                <div>
+                    <label for="edad">Edad:</label>
+                    <input type="text" id="edad">
+                    <span id="error-edad" class="mensaje-error"></span>
+                </div>
+                <div>
+                    <label for="mensaje">Mensaje:</label>
+                    <textarea id="mensaje"></textarea>
+                    <span id="error-mensaje" class="mensaje-error"></span>
+                </div>
+                <button type="submit">Enviar</button>
+            </form>
+            <div id="mensaje-exito" style="color: green; display: none;"></div>
         </div>
         <script src="clase-9.js"></script>
     </body>