diff --git a/clase-9.js b/clase-9.js index 6df1007..accf7de 100644 --- a/clase-9.js +++ b/clase-9.js @@ -1 +1,136 @@ -// Agregar acá el código javascript para los ejercicios +// Agregar a la página un botón y un párrafo que diga Botón clickeado 0 veces. +// Cada vez que se haga clic en el botón, el texto del párrafo debe cambiar al mensaje +// "Botón clickeado N veces", donde N es el número de veces que se hizo clic. + +let botonClicks = document.querySelector('#boton-clicks'); // almacenamos en las variables el elemento boton y el span con id numero +let spanNumero = (document.querySelector('#numero-clicks')); + +let numeroClicks = parseInt(spanNumero.textContent) // extraemos solamente el textcontent y lo almacenamos en otra variable + +function contarClicks (){ + numeroClicks = numeroClicks+1; + spanNumero.textContent = numeroClicks; //actualizamos el numero dentro del con el nuevo textcontent +}; + +botonClicks.addEventListener('click', contarClicks); //ejecutamos la funcion + + +// 2 Agregar un campo de texto a la página. A medida que el usuario escribe, mostrar en +// tiempo real la cantidad de caracteres ingresados debajo del campo. + +let label = document.querySelector("#label-ej2"); +let cantidadLetras = 0 + +const campo = document.querySelector("#input-ej2"); +campo.addEventListener("input", (e) => { + cantidadLetras = e.target.value.length; + label.textContent = cantidadLetras; + }); + + +// 3 Crear una lista con cinco ítems. Usando delegación de eventos, +// hacer que al hacer clic en cualquier ítem se le agregue la clase "seleccionado" +// y se la quite a los demás (es decir, solo un ítem puede estar seleccionado a la vez). + +let ulPaises = document.querySelector('#lista-paises'); // aignamos la ul en una variable +let arrayPaises = document.querySelectorAll('.pais'); // y los li en un array + +ulPaises.addEventListener('click', (e) => { + let paisElegido = e.target; + let listaPaisesNoelegidos =[]; + + paisElegido.classList.replace('pais', 'seleccionado'); //cambiamos la clase del pais seleccionado + + console.log(paisElegido.classList); + for (let item of arrayPaises){ + if (item.classList != 'seleccionado'){ + item.remove(); + } + } + +}) + +// 4 Agregar a la página los siguientes elementos: +//
+//
+// +//
+//
+ +// Registrar listeners de bubbling en los tres elementos y verificar +// en consola el orden en que se ejecutan al hacer clic en el botón. +// Luego, agregar un listener de capturing en #externo y observar cómo cambia el orden. + + +let divExterno = document.querySelector('#externo'); +let divInterno = document.querySelector('#interno'); +let boton = document.querySelector('#boton'); + +divExterno.addEventListener('click' , () =>{ + console.log('externo (primero)') +}, true); + +divInterno.addEventListener('click' , () =>{ + console.log('Interno (tercero)') +}); + +boton.addEventListener('click' , () =>{ + console.log('boton (segundo)') +}); + +// con el tercer argumento true en el listener del div externo el orden queda asi: +// 1ro - divExterno / 2do - boton / 3ro - divInterno / + + + +// 5 Crear un formulario con los campos nombre, edad y mensaje (textarea). Al enviarlo: + +// Verificar que ningún campo esté vacío. +// Verificar que la edad sea un número entero positivo, menor que 120. +// Si hay errores, mostrarlos en la página junto al campo correspondiente. +// Si todo es válido, mostrar un mensaje de éxito y limpiar el formulario. + +// Para limpiar un campo se puede asignar un string vacío a su propiedad value: + +// document.querySelector("#nombre").value = ""; + +let nombre = document.querySelector('#nombre'); // almacenamos en variables los elementos html que necesitamos +let edad = document.querySelector('#edad'); +let mensaje = document.querySelector('textarea'); +let enviar = document.querySelector('#enviar'); +let form = document.querySelector('form') + +form.addEventListener('submit' , (e) =>{ //creamos el listener previniendo el refresh de la pagina + e.preventDefault(); + + if (nombre.value.trim() === '') { //si el nombre esta vacio => mensaje error + document.querySelector('#error-nombre').textContent = 'El nombre no puede estar vacio'; + + } else if (edad.value > 120 || edad.value < 0 || edad.value === ""){ // en este else if recibimos todos los errores para despues desglosarlo + if(edad.value > 120 || edad.value < 0){ // si: el numero es negativo o mayor a 120 => "edad invalida" + document.querySelector('#error-edad').textContent = 'edad invalida'; + } + else if (edad.value === ""){ // si la edad esta vacia => error + document.querySelector('#error-edad').textContent = 'El campo "edad" no puede estar vacio'; + } + + + } else if (mensaje.value.trim() === ''){ // si el mensaje esta vacio => error + document.querySelector('#error-mensaje').textContent = 'El mensaje no puede estar vacio'; + } + + if (!(nombre.value.trim() === '' || edad.value > 120 || edad.value < 0 || edad.value === "" || mensaje.value.trim() === '')){ // Si se umplen TODAS las condiciones neesarias => "formulario enviaro" + alert("Formulario enviado"); + document.querySelector("#nombre").value = ""; // borramos todos los valores en blanco al recibir el mensaje de envio de formulario + document.querySelector("#error-nombre").textContent = ""; + document.querySelector("#edad").value = ""; + document.querySelector("#error-edad").textContent = ""; + document.querySelector("#mensaje").value = ""; + document.querySelector("#error-mensaje").textContent = ""; + return; + } + + + + +}); diff --git a/index.html b/index.html index 2a6b85f..3fa1a85 100644 --- a/index.html +++ b/index.html @@ -9,23 +9,56 @@

Clase 9 - Eventos

- +

el boton fue clickeado 0 veces

+

+

Contador de caracteres

+ + + +

+

Elige tu candidato para la copa del mundo:

+

+

Capturing y bubbling

+
+
+ +
+

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