diff --git a/clase-9.js b/clase-9.js index 6df1007..e9bda6e 100644 --- a/clase-9.js +++ b/clase-9.js @@ -1 +1,72 @@ // 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.`; +}); + +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.`; +}); + +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"); +}); + +formulario.addEventListener("submit", function(e) { + e.preventDefault(); + + const nombre = document.querySelector("#nombre"); + const mensaje = document.querySelector("#mensaje"); + const errorNombre = document.querySelector("#errorNombre"); + const errorMensaje = document.querySelector("#errorMensaje"); + const resultado = document.querySelector("#resultado"); + + errorNombre.textContent = ""; + errorMensaje.textContent = ""; + resultado.textContent = ""; + + let hayErrores = false; + + if (nombre.value.trim() === "") { + errorNombre.textContent = "El nombre no puede estar vacío"; + hayErrores = true; + } + + if (mensaje.value.trim() === "") { + errorMensaje.textContent = "El mensaje no puede estar vacío"; + hayErrores = true; + } + + if (!hayErrores) { + resultado.textContent = "Formulario enviado correctamente"; + formulario.reset(); + } +}); \ No newline at end of file diff --git a/index.html b/index.html index 2a6b85f..4a1770f 100644 --- a/index.html +++ b/index.html @@ -9,23 +9,46 @@

Clase 9 - Eventos

- + +

Este boton ha sido clickeado 0 veces.


- + +

El campo de texto tiene 0 caracteres.


- +

- +
+
+ +
+

- +
+
+ +

+ +

+ +

+
+ +

+