89 lines
2.1 KiB
JavaScript
89 lines
2.1 KiB
JavaScript
// Agregar acá el código javascript para los ejercicios
|
|
|
|
/*
|
|
|
|
1. 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.
|
|
|
|
*/
|
|
|
|
const boton = document.getElementById("boton");
|
|
|
|
boton.addEventListener("click", () => {
|
|
|
|
let contador = parseInt(document.getElementById("cantidad").textContent);
|
|
|
|
contador = contador + 1;
|
|
|
|
document.getElementById("cantidad").textContent = contador;
|
|
|
|
if (contador === 1) {
|
|
|
|
document.getElementById("descripcionCantidad").textContent = "vez.";
|
|
|
|
} else {
|
|
|
|
document.getElementById("descripcionCantidad").textContent = "veces.";
|
|
|
|
}
|
|
|
|
});
|
|
|
|
/*
|
|
|
|
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.
|
|
|
|
*/
|
|
|
|
const inputTexto = document.getElementById("texto");
|
|
|
|
inputTexto.addEventListener("input", () => {
|
|
|
|
let cantidad = inputTexto.value.length;
|
|
|
|
document.getElementById("cantidadCaracteres").textContent = cantidad;
|
|
});
|
|
|
|
/*
|
|
|
|
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).
|
|
|
|
*/
|
|
|
|
const lista3 = document.getElementById("lista-nueva");
|
|
|
|
lista3.addEventListener("click", (evento) => {
|
|
|
|
const items = document.querySelectorAll("#lista-nueva li");
|
|
|
|
for (const item of items) {
|
|
|
|
item.classList.remove("seleccionado");
|
|
|
|
}
|
|
|
|
evento.target.classList.add("seleccionado");
|
|
|
|
|
|
});
|
|
|
|
/*
|
|
|
|
4. Agregar a la página los siguientes elementos:
|
|
```html
|
|
<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.
|
|
*/ |