forked from marquez.juan/clase-9-eventos
50 lines
2.4 KiB
Markdown
50 lines
2.4 KiB
Markdown
0. Seguir los pasos habituales para gestionar con git estos ejercicios:
|
|
- Hacer un fork de este repositorio (noten que tiene 'marquez.juan' en la URL)
|
|
- Clonar **tu fork**. (No debería figurar `marquez.juan` en la URL).
|
|
- Crear una nueva rama con `switch -c nombre-de-tu-rama`
|
|
- Hacer `git push origin nombre-de-tu-rama`
|
|
- Desde gitea, crear el pull request, desde la rama recién creada de tu fork
|
|
hacia la rama `main` del repositorio que pertenece a `marquez.juan`. De esta
|
|
manera el docente puede ir siguiendo tu trabajo y respondiendo las consultas
|
|
más fácilmente.
|
|
- Comenzar a resolver los ejercicios, en el archivo `ejercicios.js`.
|
|
- Hacer al menos un commit por cada uno de los ejercicios que siguen.
|
|
- Al finalizar cada sesión de trabajo, hacer `git push origin
|
|
nombre-de-tu-rama`
|
|
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.
|
|
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.
|
|
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:
|
|
```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.
|
|
|
|
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 = "";
|
|
```
|