clase-9-eventos/clase-9.js

// Ejercicio 1 - Contador de clics
let clickCount = 0;
const boton = document.getElementById('miBoton');
const parrafo = document.getElementById('contadorClicks');

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

// Ejercicio 2 - Contador de caracteres en tiempo real
const campoTexto = document.getElementById('campoTexto');
const contadorCaracteres = document.getElementById('contadorCaracteres');

campoTexto.addEventListener('input', function() {
    contadorCaracteres.textContent = `Caracteres ingresados: ${campoTexto.value.length}`;
});

// Ejercicio 3 - Selección única en la lista con delegación de eventos
const listaItems = document.getElementById('listaItems');

listaItems.addEventListener('click', function(event) {
    const item = event.target.closest('li');
    if (!item || !listaItems.contains(item)) {
        return;
    }

    listaItems.querySelectorAll('li').forEach(function(li) {
        li.classList.remove('seleccionado');
    });
    item.classList.add('seleccionado');
});

// Ejercicio 4 - Bubbling y capturing
const externo = document.getElementById('externo');
const interno = document.getElementById('interno');
const botonCaptura = document.getElementById('botonCaptura');

externo.addEventListener('click', function() {
    console.log('bubbling: externo');
});

interno.addEventListener('click', function() {
    console.log('bubbling: interno');
});

botonCaptura.addEventListener('click', function() {
    console.log('bubbling: button');
});

externo.addEventListener('click', function() {
    console.log('capturing: externo');
}, true);

// Ejercicio 5 - Validación de formulario
const formulario = document.getElementById('formulario');
const nombreInput = document.getElementById('nombre');
const edadInput = document.getElementById('edad');
const mensajeInput = document.getElementById('mensaje');
const errorNombre = document.getElementById('errorNombre');
const errorEdad = document.getElementById('errorEdad');
const errorMensaje = document.getElementById('errorMensaje');
const formResultado = document.getElementById('formResultado');

function limpiarErrores() {
    errorNombre.textContent = '';
    errorEdad.textContent = '';
    errorMensaje.textContent = '';
    formResultado.textContent = '';
}

formulario.addEventListener('submit', function(event) {
    event.preventDefault();
    limpiarErrores();

    let esValido = true;
    const nombre = nombreInput.value.trim();
    const edadValor = edadInput.value.trim();
    const mensaje = mensajeInput.value.trim();

    if (!nombre) {
        errorNombre.textContent = 'El nombre no puede estar vacío.';
        esValido = false;
    }

    if (!edadValor) {
        errorEdad.textContent = 'La edad no puede estar vacía.';
        esValido = false;
    } else if (!/^[0-9]+$/.test(edadValor)) {
        errorEdad.textContent = 'La edad debe ser un número entero positivo.';
        esValido = false;
    } else {
        const edad = parseInt(edadValor, 10);
        if (edad <= 0 || edad >= 120) {
            errorEdad.textContent = 'La edad debe ser mayor que 0 y menor que 120.';
            esValido = false;
        }
    }

    if (!mensaje) {
        errorMensaje.textContent = 'El mensaje no puede estar vacío.';
        esValido = false;
    }

    if (esValido) {
        formResultado.textContent = 'Formulario enviado con éxito.';
        nombreInput.value = '';
        edadInput.value = '';
        mensajeInput.value = '';
    }
});