diff --git a/clase-9.js b/clase-9.js index 6df1007..cd1d50b 100644 --- a/clase-9.js +++ b/clase-9.js @@ -1 +1,133 @@ // Agregar acá el código javascript para los ejercicios + +//Ejercicio 1 de la clase 9 + +let clicks = 0; +const boton = document.querySelector("#botonEjc1"); +const parrafo = document.querySelector("#textoContador"); + +boton.addEventListener("click", function(){ + clicks++; + parrafo.textContent = `Botón clickeado ${clicks} veces`; +}); + + + +//Ejercicio 2 de la clase 9 + +const campo = document.querySelector("#texto"); +const contadorCaracteres = document.querySelector("#cantidadCaracteres"); + +campo.addEventListener("input", function() { + contadorCaracteres.textContent = `Cantidad de caracteres: ${campo.value.length}`; +}); + + + +//Ejercicio 3 de la clase 9" + +const lista = document.querySelector("#lista"); +lista.addEventListener("click", function(event) { + if (event.target.tagName === "LI") { + + const items = document.querySelectorAll("#lista li"); + + for (const item of items) { + item.classList.remove("seleccionado"); + }; + + event.target.classList.add("seleccionado"); + console.log(event.target.textContent); + } +}); + + + +//Ejercicio 4 de la clase 9 +//Fase de Bubbling +const externo1 = document.querySelector("#externo"); +externo1.addEventListener("click", function() { + console.log("externo"); +}); + +const interno1 = document.querySelector("#interno"); +interno1.addEventListener("click", function() { + console.log("interno"); +}); + +const boton1 = document.querySelector("#botón"); +boton1.addEventListener("click", function() { + console.log("botón"); +}); +//Se visualiza en consola como: +//botón +//interno +//externo + + +//Fase de Capturing solamente en #externo +externo1.addEventListener("click", function() { + console.log("externo - capturing"); +}, true); +//Se visualiza en consola como: +//externo - capturing +//botón +//interno +//externo + + + +//Ejercicio 5 de la clase 9 + +const form = document.querySelector("#formulario"); +form.addEventListener("submit", function(event) { + event.preventDefault(); + + const nombre = document.querySelector("#nombre").value; + const edad = document.querySelector("#edad").value; + const mensaje = document.querySelector("#mensaje").value; + + const errorNombre = document.querySelector("#errorNombre"); + const errorEdad = document.querySelector("#errorEdad"); + const errorMensaje = document.querySelector("#errorMensaje"); + + const resultado = document.querySelector("#resultado"); + + errorNombre.textContent = ""; + errorEdad.textContent = ""; + errorMensaje.textContent = ""; + resultado.textContent = ""; + + if (nombre.trim() === "") { + errorNombre.textContent = "El nombre no puede estar vacío."; + errorNombre.classList.add("visible"); + return; + } + + errorNombre.classList.remove("visible"); + + if (edad.trim() === "") { + errorEdad.textContent = "La edad no puede estar vacía."; + errorEdad.classList.add("visible"); + return; + } else if (isNaN(edad) || edad <= 0 || edad >= 120) { + errorEdad.textContent = "La edad debe ser un número mayor que 0 y menor que 120"; + errorEdad.classList.add("visible"); + return; + } + + errorEdad.classList.remove("visible"); + + if(mensaje.trim() === "") { + errorMensaje.textContent = "El mensaje no puede estar vacío."; + errorMensaje.classList.add("visible") + return; + } + errorMensaje.classList.remove("visible"); + + resultado.textContent = "Formulario enviado con éxito."; + + document.querySelector("#nombre").value = ""; + document.querySelector("#edad").value = ""; + document.querySelector("#mensaje").value = ""; +}); \ No newline at end of file diff --git a/estilo.css b/estilo.css index 19d93f8..dae03e4 100644 --- a/estilo.css +++ b/estilo.css @@ -3,3 +3,16 @@ div { padding: 10px; margin: 10px; } + +.seleccionado { + background-color: yellow; + font-weight: bold; +} + +.error { + color: red; +} + +.visible{ + display: block; +} diff --git a/index.html b/index.html index 2a6b85f..179a478 100644 --- a/index.html +++ b/index.html @@ -10,22 +10,56 @@

Clase 9 - Eventos

+ +

Botón clickeado 0 veces


+ +

Cantidad de caracteres: 0


+

+
+
+ +
+

+
+ + +

+ + + +

+ + + +

+ + + +
+ +