// Agregar acá el código javascript para los ejercicios
const boton1 = document.querySelector("button");
const parrafo1 = document.querySelector("p");
var i = 0

boton1.addEventListener("click", function () {
    i = i + 1
    parrafo1.textContent = `Este boton ha sido clickeado ${i} veces`;
    console.log(`El botón fue clickeado ${i} veces`);
});

const campo = document.querySelector("input");
const parrafo2 = document.querySelector("#contadorCaracteres");

campo.addEventListener("input", (e) => {
    parrafo2.textContent = `El campo de texto tiene ${e.target.value.length} caracteres`;
    console.log(e.target.value); 
});

const lista = document.querySelector("ul");

lista.addEventListener("click", (e) => {
    if (e.target.tagName === "LI") {
        const items = document.querySelectorAll("li")
        for (const item of items) {
            item.classList.remove("seleccionado");
        }

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

        console.log(e.target.textContent);
    }
});

document.querySelector("#externo").addEventListener("click", () => {
    console.log("externo");
}, true);
document.querySelector("#interno").addEventListener("click", () => {
    console.log("interno");
});
document.querySelector("#boton").addEventListener("click", () => {
    console.log("boton");
});