// Agregar acá el código javascript para los ejercicios

//Ejercicio 1 de la clase 9

let clicks = 0;
const boton = document.querySelector("#botonEjc1");
const parrafo = document.querySelector("#textoContador");

boton.addEventListener("click", function(){
    clicks++;
    parrafo.textContent = `Botón clickeado ${clicks} veces`;
});



//Ejercicio 2 de la clase 9

const campo = document.querySelector("#texto");
const contadorCaracteres = document.querySelector("#cantidadCaracteres");

campo.addEventListener("input", function() {
    contadorCaracteres.textContent = `Cantidad de caracteres: ${campo.value.length}`;
});



//Ejercicio 3 de la clase 9"

const lista = document.querySelector("#lista");
lista.addEventListener("click", function(event) {
    if (event.target.tagName === "LI") {
        
        const items = document.querySelectorAll("#lista li");

        for (const item of items) {
            item.classList.remove("seleccionado");
        };

        event.target.classList.add("seleccionado");
        console.log(event.target.textContent);
    }
});



//Ejercicio 4 de la clase 9
//Fase de Bubbling
const externo1 = document.querySelector("#externo");
externo1.addEventListener("click", function() {
    console.log("externo");
});

const interno1 = document.querySelector("#interno");
interno1.addEventListener("click", function() {
    console.log("interno");
});

const boton1 = document.querySelector("#botón");
boton1.addEventListener("click", function() {
    console.log("botón");
});
//Se visualiza en consola como:
//botón
//interno
//externo


//Fase de Capturing solamente en #externo
externo1.addEventListener("click", function() {
    console.log("externo - capturing");
}, true);
//Se visualiza en consola como:
//externo - capturing
//botón
//interno
//externo



//Ejercicio 5 de la clase 9

const form = document.querySelector("#formulario");
form.addEventListener("submit", function(event) {
    event.preventDefault();

    const nombre = document.querySelector("#nombre").value;
    const edad = document.querySelector("#edad").value;
    const mensaje = document.querySelector("#mensaje").value;

    const errorNombre = document.querySelector("#errorNombre");
    const errorEdad = document.querySelector("#errorEdad");
    const errorMensaje = document.querySelector("#errorMensaje");

    const resultado = document.querySelector("#resultado");

    errorNombre.textContent = "";
    errorEdad.textContent = "";
    errorMensaje.textContent = "";
    resultado.textContent = "";

    if (nombre.trim() === "") {
        errorNombre.textContent = "El nombre no puede estar vacío.";
        errorNombre.classList.add("visible");
        return;
    }

    errorNombre.classList.remove("visible");

    if (edad.trim() === "") {
        errorEdad.textContent = "La edad no puede estar vacía.";
        errorEdad.classList.add("visible");
        return;
    } else if (isNaN(edad) || edad <= 0 || edad >= 120) {
        errorEdad.textContent = "La edad debe ser un número mayor que 0 y menor que 120";
        errorEdad.classList.add("visible");
        return;
    }

    errorEdad.classList.remove("visible");

    if(mensaje.trim() === "") {
        errorMensaje.textContent = "El mensaje no puede estar vacío.";
        errorMensaje.classList.add("visible")
        return;
    }
    errorMensaje.classList.remove("visible");

    resultado.textContent = "Formulario enviado con éxito.";

    document.querySelector("#nombre").value = "";
    document.querySelector("#edad").value = "";
    document.querySelector("#mensaje").value = "";
});