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 <span> 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:
+// <div id="externo">
+//     <div id="interno">
+//         <button>Click</button>
+//     </div>
+// </div>
+
+// 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;
+    }
+    
+
+
+    
+});

index.html

@@ -9,23 +9,56 @@
     <body>
         <h1>Clase 9 - Eventos</h1>
         <div id="ejercicio-1">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 1 -->
+            <p>el boton fue clickeado <span id="numero-clicks">0</span> veces</p>
+            <button id="boton-clicks">click!</button>
         </div>
         <hr>
         <div id="ejercicio-2">
             <!-- Agregar acá el código HTML que haga falta para el ejercicio 2 -->
+             <p>Contador de caracteres</p>
+             
+             <input type="text" id="input-ej2">
+             <label for="input-ej2" id="label-ej2">contador de caracteres</label>
+             
         </div>
         <hr>
         <div id="ejercicio-3">
             <!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
+             <p>Elige tu candidato para la copa del mundo:</p>
+             <ul id="lista-paises">
+                <li class="pais" id="esp">Espana</li>
+                <li class="pais" id="eng">Inglaterra</li>
+                <li class="pais" id="fra">Francia</li>
+                <li class="pais" id="arg">Argentina</li>
+             </ul>
         </div>
         <hr>
         <div id="ejercicio-4">
             <!-- Agregar acá el código HTML que haga falta para el ejercicio 4 -->
+             <p>Capturing y bubbling</p>
+            <div id="externo">
+                <div id="interno">
+                    <button id="boton">Click</button>
+                </div>
+            </div>
         </div>
         <hr>
         <div id="ejercicio-5">
             <!-- Agregar acá el código HTML que haga falta para el ejercicio 5 -->
+             <form>
+                <label for="nombre">Nombre</label> 
+                <input type="text" name="nombre" id="nombre">
+                <label for="nombre" id="error-nombre"></label>
+                <br>
+                <label for="edad">Edad</label>
+                <input type="number" name="edad" id="edad">
+                <label for="nombre" id="error-edad"></label>
+                <br>
+                <label for="mensaje">Mensaje</label>
+                <textarea name="mensaje" id="mensaje"></textarea>
+                <label for="mensaje" id="error-mensaje"></label>
+                <button type="submit" id="enviar">enviar</button>
+             </form>
         </div>
         <script src="clase-9.js"></script>
     </body>