74 lines
2.9 KiB
JavaScript
74 lines
2.9 KiB
JavaScript
// 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.
|
|
|
|
|
|
|
|
// 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 = "";
|