forked from marquez.juan/clase-9-eventos
ejercicio2
This commit is contained in:
42
clase-9.js
42
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 = "";
|
||||
Reference in New Issue
Block a user