// 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);