diff --git a/clase-9.js b/clase-9.js index 6df1007..f5d7ed3 100644 --- a/clase-9.js +++ b/clase-9.js @@ -1 +1,157 @@ // Agregar acá el código javascript para los ejercicios + +//EJERCICIO 1 +// 1. Inicialización del estado +let contador = 0; + +// 2. Selecciono los elementos del DOM +const boton = document.getElementById('boton-contador'); +const parrafo = document.getElementById('texto-contador'); + +// 3. Registro del Event Listener utilizando una función clásica +boton.addEventListener('click', function () { + // Incremento el valor de la variable en 1 + contador++; + // Actualizo el contenido de texto del párrafo + parrafo.textContent = `Botón clickeado ${contador} veces.`; +}); + +//EJERCICIO 2 +// 1. Selección de los elementos del DOM +const campo = document.querySelector("#campo-texto"); +const contadorcaracteres = document.querySelector("#contador-caracteres"); + +// 2. Registro del Event Listener utilizando una función clásica +campo.addEventListener("input", function (e) { + // Obtengo el texto actual del campo + const textoActual = e.target.value; + // Calculo la longitud del texto + const cantidadCaracteres = textoActual.length; + // Actualizo el contenido del párrafo + contadorcaracteres.textContent = `Caracteres ingresados: ${cantidadCaracteres}`; +}); + +//EJERCICIO 3 + +// 1. Selecciono el elemento padre (la lista) +const lista = document.querySelector("#lista-items"); + +// 2. Registro un único listener en el elemento padre +lista.addEventListener("click", function (e) { + // Valido si el elemento exacto que recibió el clic es un
  • + if (e.target.tagName === "LI") { + // Busco si existe actualmente algún ítem con la clase 'seleccionado' + const itemSeleccionadoPrevio = lista.querySelector(".seleccionado"); + // Si se encuentra un ítem seleccionado, se le remueve la clase + if (itemSeleccionadoPrevio) { + itemSeleccionadoPrevio.classList.remove("seleccionado"); + } + // Agrego la clase 'seleccionado' al ítem que disparó el evento + e.target.classList.add("seleccionado"); + } +}); + +//EJERCICIO 4 + +// 1. Selecciono los tres elementos del DOM utilizando sus IDs y etiquetas +const externo = document.querySelector("#externo"); +const interno = document.querySelector("#interno"); +const botonej4 = document.querySelector("#boton-ej4"); + +// 2. Registro de un listener en fase de Capturing (Descenso). Al pasar 'true' como tercer argumento, este código se ejecuta primero, +// cuando el evento baja desde la raíz del DOM hacia el botón. +externo.addEventListener("click", function () { + console.log("externo capturing"); +}, true); + +// 3. Registro de listeners en fase de Bubbling (Ascenso) +// Estos listeners no tienen un tercer argumento (o es 'false' por defecto), +// por lo que se ejecutan cuando el evento sube desde el elemento origen. +botonej4.addEventListener("click", function () { + console.log("boton"); +}); + +interno.addEventListener("click", function () { + console.log("interno"); +}); + +externo.addEventListener("click", function () { + console.log("externo"); +}); + +//EJERCICIO 5 + +// 1. Selecciono el formulario y contenedores globales del DOM +const formulario = document.querySelector("#formulario-contacto"); +const mensajeExito = document.querySelector("#mensaje-exito"); + +// 2. Registro el Event Listener para el evento "submit" +formulario.addEventListener("submit", function (e) { + // Evito el comportamiento por defecto de recargar la página + e.preventDefault(); + + // 3. Selecciono los elementos de entrada de datos + const inputNombre = document.querySelector("#nombre"); + const inputEdad = document.querySelector("#edad"); + const inputMensaje = document.querySelector("#mensaje"); + + // 4. Selecciono los elementos contenedores de error + const errorNombre = document.querySelector("#error-nombre"); + const errorEdad = document.querySelector("#error-edad"); + const errorMensaje = document.querySelector("#error-mensaje"); + + // 5. Obtengo y limpio los valores ingresados (eliminando espacios) + const nombreVal = inputNombre.value.trim(); + const edadVal = inputEdad.value.trim(); + const mensajeVal = inputMensaje.value.trim(); + + // Variable de control para el estado de la validación + let formularioValido = true; + + // 6. Limpio mensajes de error anteriores y el mensaje de éxito + errorNombre.textContent = ""; + errorEdad.textContent = ""; + errorMensaje.textContent = ""; + mensajeExito.style.display = "none"; + mensajeExito.textContent = ""; + + // 7. Valido el campo Nombre (No vacío) + if (nombreVal === "") { + errorNombre.textContent = "El nombre no puede estar vacío."; + formularioValido = false; + } + + // 8. Valido el campo Edad (No vacío, entero positivo y menor a 120) + // Convierto el string a número entero para las comprobaciones numéricas + const edadEntero = parseInt(edadVal, 10); + + if (edadVal === "") { + errorEdad.textContent = "La edad no puede estar vacía."; + formularioValido = false; + } else if (isNaN(edadEntero) || Number(edadVal) !== edadEntero || edadEntero <= 0) { + // Valida que sea un número válido, que no tenga decimales y sea mayor a 0 + errorEdad.textContent = "La edad debe ser un número entero positivo."; + formularioValido = false; + } else if (edadEntero >= 120) { + errorEdad.textContent = "La edad debe ser menor que 120."; + formularioValido = false; + } + + // 9. Valido el campo Mensaje (No vacío) + if (mensajeVal === "") { + errorMensaje.textContent = "El mensaje no puede estar vacío."; + formularioValido = false; + } + + // 10. Si todos los campos son válidos, proceso el formulario + if (formularioValido) { + // Muestro mensaje de éxito en la página + mensajeExito.textContent = "¡Formulario enviado con éxito!"; + mensajeExito.style.display = "block"; + + // Limpio el contenido de cada uno de los campos expuestos del formulario + inputNombre.value = ""; + inputEdad.value = ""; + inputMensaje.value = ""; + } +}); \ No newline at end of file diff --git a/index.html b/index.html index 2a6b85f..acf76ec 100644 --- a/index.html +++ b/index.html @@ -10,22 +10,57 @@

    Clase 9 - Eventos

    + +

    Botón clickeado 0 veces.


    + +

    Caracteres ingresados: 0


    +

    +
    +
    + +
    +

    +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    + +
    +