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. Seleccionar el elemento padre (la lista)
const lista = document.querySelector("#lista-items");

// 2. Registrar un único listener en el elemento padre
lista.addEventListener("click", function (e) {

    // Validar si el elemento exacto que recibió el clic es un <li>
    if (e.target.tagName === "LI") {

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

        // Agregar la clase 'seleccionado' al ítem que disparó el evento
        e.target.classList.add("seleccionado");
    }
});