// 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.

let botonClicks = document.querySelector('#boton-clicks'); // almacenamos en las variables el elemento boton y el span con id numero
let spanNumero = (document.querySelector('#numero-clicks'));

let numeroClicks = parseInt(spanNumero.textContent) // extraemos solamente el textcontent y lo almacenamos en otra variable

function contarClicks (){
    numeroClicks = numeroClicks+1;
    spanNumero.textContent = numeroClicks; //actualizamos el numero dentro del <span> con el nuevo textcontent
};

botonClicks.addEventListener('click', contarClicks); //ejecutamos la funcion 


// 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.

let label = document.querySelector("#label-ej2");
let cantidadLetras = 0

const campo = document.querySelector("#input-ej2");
campo.addEventListener("input", (e) => {
    cantidadLetras = e.target.value.length;
    label.textContent = cantidadLetras;
    });

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

let ulPaises = document.querySelector('#lista-paises'); // aignamos la ul en una variable
let arrayPaises = document.querySelectorAll('.pais'); // y los li en un array

ulPaises.addEventListener('click', (e) => {
    let paisElegido = e.target;
    let listaPaisesNoelegidos =[];

    paisElegido.classList.replace('pais', 'seleccionado'); //cambiamos la clase del pais seleccionado

    console.log(paisElegido.classList);
    for (let item of arrayPaises){
        if (item.classList != 'seleccionado'){
            item.remove();
        }
    }

})

// 4 Agregar a la página los siguientes elementos:
// <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.


let divExterno = document.querySelector('#externo');
let divInterno = document.querySelector('#interno');
let boton = document.querySelector('#boton');

divExterno.addEventListener('click' , () =>{
    console.log('externo (primero)')
}, true);

divInterno.addEventListener('click' , () =>{
    console.log('Interno (tercero)')
});

boton.addEventListener('click' , () =>{
    console.log('boton (segundo)')
});

// con el tercer argumento true en el listener del div externo el orden queda asi:
// 1ro - divExterno / 2do - boton / 3ro - divInterno /



// 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:

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