ejercicio2

clase-9.js

@@ -13,3 +13,45 @@ function contarClicks (){
 };
 
 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).
+
+
+
+// 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.
+
+
+
+// 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 = "";

index.html

@@ -15,6 +15,11 @@
         <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">