// Agregar acá el código javascript para los ejercicios

// Ejercicio 1

const clickCounter = document.getElementById('clickCounter');
const clickButton = document.getElementById('clickButton');

let count = 0;

clickButton.addEventListener('click', () => {
    count++;
    clickCounter.textContent = count;
});

// Ejercicio 2

const textInput = document.getElementById('textInput');
const charCount = document.getElementById('charCount');

textInput.addEventListener('input', () => {
    charCount.textContent = textInput.value.length;
});

// Ejercicio 3

const itemList = document.getElementById('itemList');

itemList.addEventListener('click', (event) => {
    if (event.target.tagName === 'LI') {
        const items = itemList.querySelectorAll('li');
        items.forEach(item => item.classList.remove('selected'));
        event.target.classList.add('selected');
    }
});

// Ejercicio 4

const outside = document.getElementById('outside');
const inside = document.getElementById('inside');
const insideButton = document.getElementById('insideButton');

outside.addEventListener('click', () => {
    console.log("outside");
});

inside.addEventListener('click', () => {
    console.log("inside");
})

insideButton.addEventListener('click', () => {
    console.log("button");
});

outside.addEventListener('click', () => {
    console.log("outside capturing");
}, true);

// Ejercicio 5

const userForm = document.getElementById('userForm');
const nameInput = document.getElementById('nameInput');
const ageInput = document.getElementById('ageInput');
const messageInput = document.getElementById('messageInput');

const clearErrors = () => {
    document.getElementById('nameError').textContent = '';
    document.getElementById('ageError').textContent = '';
    document.getElementById('messageError').textContent = '';
}

const validateForm = () => {
    let isValid = true;

    if (nameInput.value.trim() === '') {
        document.getElementById('nameError').textContent = 'El nombre es obligatorio.';
        isValid = false;
    }

    const age = parseInt(ageInput.value);
    if (isNaN(age) || age < 0 || age > 120) {
        document.getElementById('ageError').textContent = 'La edad debe ser un número entre 0 y 120.';
        isValid = false;
    }

    if (messageInput.value.trim() === '') {
        document.getElementById('messageError').textContent = 'El mensaje es obligatorio.';
        isValid = false;
    }

    return isValid;
}

const showSuccessMessage = () => {
    alert('Formulario enviado con éxito!');
}

const clearForm = () => {
    nameInput.value = '';
    ageInput.value = '';
    messageInput.value = '';
}

const handleSubmit = (event) => {
    event.preventDefault();

    clearErrors();

    const isValid = validateForm();

    if (isValid) {
        showSuccessMessage();
        clearForm();
}}

userForm.addEventListener('submit', handleSubmit);