121 lines
4.1 KiB
JavaScript
121 lines
4.1 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.
|
|
|
|
|
|
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');
|
|
let edad = document.querySelector('#edad');
|
|
let mensaje = document.querySelector('textarea');
|
|
let enviar = document.querySelector('#enviar');
|
|
let form = document.querySelector('form')
|
|
|
|
console.log(nombre.value);
|
|
|
|
form.addEventListener('submit' , (e) =>{
|
|
e.preventDefault();
|
|
if (nombre.value.trim() === '') {
|
|
console.log('nombre vacio, reintenta');
|
|
return;
|
|
} else if (edad.value > 120 || edad.value < 0){
|
|
console.log('edad inverosimil');
|
|
return;
|
|
} else if (mensaje.value.trim() === ''){
|
|
console.log('mensaje vacio');
|
|
return;
|
|
}
|
|
|
|
|
|
console.log("Formulario enviado");
|
|
});
|