clase-9-eventos/clase-9.js

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

/*

1. Agregar a la página un botón y un párrafo que diga `Botón clickeado 0
   veces`. Cada vez que se haga clic en el botón, el texto del párrafo debe
   cambiar al mensaje `"Botón clickeado N veces"`, donde N es el número de
   veces que se hizo clic.

*/

const boton = document.getElementById("boton");

boton.addEventListener("click", () => {

    let contador = parseInt(document.getElementById("cantidad").textContent);

    contador = contador + 1;

    document.getElementById("cantidad").textContent = contador;
 
    if (contador === 1) {

        document.getElementById("descripcionCantidad").textContent = "vez.";

    } else {

        document.getElementById("descripcionCantidad").textContent = "veces.";

    }

});

/*

2. Agregar un campo de texto a la página. A medida que el usuario escribe,
   mostrar en tiempo real la cantidad de caracteres ingresados debajo del campo.

*/

const inputTexto = document.getElementById("texto");

inputTexto.addEventListener("input", () => {

    let cantidad = inputTexto.value.length;

    document.getElementById("cantidadCaracteres").textContent = cantidad;
});

/* 

3. Crear una lista con cinco ítems. Usando delegación de eventos, hacer que al
   hacer clic en cualquier ítem se le agregue la clase `"seleccionado"` y se
   la quite a los demás (es decir, solo un ítem puede estar seleccionado a la
   vez).

*/

const lista3 = document.getElementById("lista-nueva");

lista3.addEventListener("click", (evento) => {

    const items = document.querySelectorAll("#lista-nueva li");

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

    }

    evento.target.classList.add("seleccionado");


});

/* 

4. Agregar a la página los siguientes elementos:
   ```html
   <div id="externo">
       <div id="interno">
           <button>Click</button>
       </div>
   </div>
   ```
   Registrar listeners de bubbling en los tres elementos y verificar en consola
   el orden en que se ejecutan al hacer clic en el botón. Luego, agregar un
   listener de capturing en `#externo` y observar cómo cambia el orden.
*/

// bubbling:

const externoBub = document.getElementById("externoBub");
const internoBub = document.getElementById("internoBub");
const botonBub = document.getElementById("botonBub");

externoBub.addEventListener("click", () => {
    console.log("DIV EXTERNO");
});

internoBub.addEventListener("click", () => {
    console.log("DIV INTERNO");
});

botonBub.addEventListener("click", () => {
    console.log("BOTON");
});

// Capturing


const externoCap = document.getElementById("externoCap");
const internoCap = document.getElementById("internoCap");
const botonCap = document.getElementById("botonCap");

externoCap.addEventListener("click", () => {
    console.log("DIV EXTERNO");
}, true);

internoCap.addEventListener("click", () => {
    console.log("DIV INTERNO");
}, true);

botonCap.addEventListener("click", () => {
    console.log("BOTON");
}, true);

/*

5. Crear un formulario con los campos nombre, edad y mensaje (textarea). Al
   enviarlo:

   - Verificar que ningún campo esté vacío.
   - Verificar que la edad sea un número entero positivo, menor que 120.
   - Si hay errores, mostrarlos en la página junto al campo correspondiente.
   - Si todo es válido, mostrar un mensaje de éxito y limpiar el formulario.

   Para limpiar un campo se puede asignar un string vacío a su propiedad
   `value`:

   ```js
   document.querySelector("#nombre").value = "";
   ```
*/



function validarNombre() {

    const nombre = document.getElementById("nombre").value;
    if (nombre.trim() === "") {
        document.getElementById("errorNombre").textContent="El campo nombre no puede estar vacio";
        return false;
    }

    document.getElementById("errorNombre").textContent = "";
    return true;

} 

function validarEdad() {

    const edadTexto = document.getElementById("edad").value;

    if (edadTexto.trim() === "") {

        document.getElementById("errorEdad").textContent = "Escribir la edad";
        return false;
    }

    const edad = parseInt(edadTexto);

    if (isNaN(edad)) {
        document.getElementById("errorEdad").textContent = "La edad no puede ser un texto";
        return false;
    }
    if  (edad <= 0 || edad >= 120) {
        document.getElementById("errorEdad").textContent = "Edad invalida";
        return false;
        }
    document.getElementById("errorEdad").textContent = "";
    return true;

}

function validarMensaje () {

    const mensaje = document.getElementById("mensaje").value;

    if (mensaje.trim() === "") {

        document.getElementById("errorMensaje").textContent = "El mensaje no puede estar vacio";
        return false;
    }

    document.getElementById("errorMensaje").textContent = "";
    return true;

}

const form = document.querySelector("#formulario")
form.addEventListener("submit", (evento) => {

    evento.preventDefault();

   const nombreValido = validarNombre();
   const edadValida = validarEdad();
   const mensajeValido = validarMensaje();

     if (nombreValido && edadValida && mensajeValido) {

        document.getElementById("exito").textContent = "Formulario enviado correctamente";
        document.getElementById("nombre").value = "";
        document.getElementById("edad").value = "";
        document.getElementById("mensaje").value = "";

    }

});