## Ejercicio 1: Agregar elementos a una lista
### **Enunciado**
Crea un script en TypeScript que permita agregar elementos a una lista cuando el usuario escriba un texto y pulse el botón **Agregar**.
---
### **HTML proporcionado**
```html
Ejercicio 1
```
---
## Ejercicio 2: Eliminar elementos al hacer clic
### **Enunciado**
Crea un script en TypeScript que permita eliminar un elemento de la lista **haciendo clic sobre él**.
---
### **HTML proporcionado**
```html
Ejercicio 2
Elemento 1
Elemento 2
Elemento 3
```
---
## Ejercicio 3: Lista dinámica con botón eliminar
### **Enunciado**
Desarrolla una aplicación que permita agregar elementos a una lista y eliminar cada uno de ellos mediante un botón individual.
---
### **HTML proporcionado**
```html
Ejercicio 3
```
---
## Ejercicio 4: Alerta después de un tiempo
### **Enunciado**
Crea una página HTML con un botón que diga **“Mostrar alerta”**.
Cuando el usuario haga clic en el botón, se debe mostrar una **alerta** después de **5 segundos** que diga: “¡Han pasado 5 segundos!”.
### **HTML base**
```html
Ejercicio 4
```
---
## Ejercicio 5: Contador con intervalos
### **Enunciado**
Crea una página HTML con un párrafo `
` que muestre un **contador** que aumente de 1 en 1 cada segundo.
Incluye un botón **“Detener”** que detenga el contador.
### **HTML base**
```html
Ejercicio 5
0
```
---
## Ejercicio 6: Alerta periódica con límite
### **Enunciado**
Crea una página HTML con un botón **“Iniciar alertas”**.
Cuando se pulse el botón, se debe mostrar una **alerta cada 3 segundos** durante **4 veces**, después de lo cual las alertas se detendrán automáticamente.
### **HTML base**
```html
Ejercicio 6
```
---
## Ejercicio 7: Cambiar el color de un párrafo
### **Enunciado**
Crea una página con un párrafo `
` y un botón **“Cambiar color”**.
Cuando el usuario haga clic en el botón, el párrafo debe cambiar su color a rojo.
### **HTML base**
```html
Ejercicio 7
Este es un párrafo que cambiará de color.
```
---
## Ejercicio 8: Alternar clases CSS
### **Enunciado**
Crea una página con un div y un botón **“Activar/Desactivar”**.
Cuando se haga clic, el div debe alternar entre dos estilos definidos en CSS (por ejemplo, fondo azul y fondo gris).
### **HTML base**
```html
Ejercicio 8
Este div cambiará de estilo.
```
---
## Ejercicio 9: Cambiar tamaño y fuente de un elemento
### **Enunciado**
Crea un párrafo y dos botones:
* **“Aumentar tamaño”** → aumenta la fuente del párrafo en 2px cada vez que se pulse.
* **“Cambiar fuente”** → cambia la tipografía del párrafo a `Courier New`.
### **HTML base**
```html
Ejercicio 9
Texto que cambiará de tamaño y fuente.
```
---
## Ejercicio 10: Mostrar todo el contenido de la variable
### **Enunciado**
Crea una página que muestre **todos los elementos de una variable `recursos`** en una lista `
`. Cada elemento debe convertirse en un `
` con su contenido completo.
### **HTML base**
```html
Ejercicio 10 - Mostrar variable
```
---
## Ejercicio 12: Filtrar y mostrar según un criterio
### **Enunciado**
Crea un input de texto y un botón **“Filtrar”**.
Cuando el usuario escriba un valor y pulse el botón, se deben mostrar **solo los elementos cuya categoría coincida con el texto ingresado**.
### **HTML base**
```html
Ejercicio 12 - Filtrar variable
Filtrar recursos por categoría
```
---
¡Perfecto! Vamos a crear un ejercicio **nuevo**, siguiendo el mismo estilo que los anteriores, pero esta vez usando **`async/await`** para que los alumnos vean cómo manejar operaciones asincrónicas de manera sencilla.
---
## Ejercicio 13: Cargar datos simulando una petición con `async/await`
### **Enunciado**
Crea una página que tenga un botón **“Cargar recursos”** y una lista `
`.
Al pulsar el botón, se debe **simular una petición a un servidor** que devuelve los recursos después de 2 segundos.
Usa `async/await` para manejar la operación y luego muestra los recursos en la lista.
---
### **HTML base**
```html
Ejercicio 13 - Async/Await