144 lines
3.5 KiB
JavaScript
144 lines
3.5 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.
|
|
*/
|
|
|
|
// bubbling:
|
|
|
|
const externoBub = document.getElementById("externoBub");
|
|
const internoBub = document.getElementById("internoBub");
|
|
const botonBub = document.getElementById("botonBub");
|
|
|
|
externoBub.addEventListener("click", () => {
|
|
console.log("DIV EXTERNO");
|
|
});
|
|
|
|
internoBub.addEventListener("click", () => {
|
|
console.log("DIV INTERNO");
|
|
});
|
|
|
|
botonBub.addEventListener("click", () => {
|
|
console.log("BOTON");
|
|
});
|
|
|
|
// Capturing
|
|
|
|
|
|
const externoCap = document.getElementById("externoCap");
|
|
const internoCap = document.getElementById("internoCap");
|
|
const botonCap = document.getElementById("botonCap");
|
|
|
|
externoCap.addEventListener("click", () => {
|
|
console.log("DIV EXTERNO");
|
|
}, true);
|
|
|
|
internoCap.addEventListener("click", () => {
|
|
console.log("DIV INTERNO");
|
|
}, true);
|
|
|
|
botonCap.addEventListener("click", () => {
|
|
console.log("BOTON");
|
|
}, true);
|
|
|
|
/*
|
|
|
|
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`:
|
|
|
|
```js
|
|
document.querySelector("#nombre").value = "";
|
|
```
|
|
*/ |