// Agregar aquí el código javascript

// ## Ejercicio 7: Formulario con validación

// Crear un formulario con los campos nombre, edad y contraseña. Al enviarlo,
// validar:

// - Que ningún campo esté vacío.
// - Que la edad contenga números enteros entre 0 y 100.
// - Que la contraseña tenga al menos 8 caracteres.

// Si hay errores, mostrarlos en la página junto a cada campo. Si todo es válido,
// ocultar los errores y mostrar un mensaje de éxito.

//creamos las variables
let formulario = document.querySelector('form');
let inputNombre = document.querySelector('#input-nombre');
let inputEdad = document.querySelector('#input-edad');
let inputPassword = document.querySelector('#input-password');
let mensajeErrorNombre = document.querySelector('#nombre-error');
let mensajeErrorEdad = document.querySelector('#edad-error');
let mensajeErrorPassword = document.querySelector('#password-error');

//creamos el listener que se activara al enviar el form
formulario.addEventListener('submit' ,(e)=>{
    e.preventDefault();
    // una vez activado el listener empezamos a validar los valores recibidos
    if(inputNombre.value === ''){   //si el nombre esta vacio, llenamos el mensaje de error
        mensajeErrorNombre.textContent = 'Ingresa tu nombre'
    } else {mensajeErrorNombre.textContent = ''} // Si el nombre NO esta vacio, borramos el mensaje de error
    if(inputEdad.value === ''){
        mensajeErrorEdad.textContent = 'Ingresa tu edad'
    } else if(inputEdad.value < 0 || inputEdad.value > 100 ){ // si es menor a 0 o mayor a 100 llenamos el mensaje de error
        mensajeErrorEdad.textContent = 'Edad fuera de limites'
    } else {mensajeErrorEdad.textContent = ''} // si nunguno de los errores surge, vaciamos el mensaje de error
    if(inputPassword.value === ''){
        mensajeErrorPassword.textContent = 'Ingrese la password'
    } else if (inputPassword.value.length < 8){     // si tiene menos de 8 caracteres llenamos el mensaje de error
        mensajeErrorPassword.textContent =  'Password corta'
    }
        else {mensajeErrorPassword.textContent = ''}

    // Si los 3 mensajes de error estan vacios, damos el formulario por valido (importante que esta condicion este en el final del listener)    
    if (mensajeErrorNombre.textContent == '' && mensajeErrorEdad.textContent == '' && mensajeErrorPassword.textContent == ''){
        alert('Formulario enviado con exito'); // informamos el envio del formulario
        inputNombre.value = ''; // y vaciamos los inputs
        inputEdad.value = '';
        inputPassword.value = '';
    }
})