clase-9-eventos/clase-9.js

// 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 = "";
    }
});