Skip to content

GitLab

Modulo 3.Ejercicios · Changes

Page history
ejercicios authored by imunnic's avatar imunnic
Show whitespace changes
Inline Side-by-side
Showing with 472 additions and 0 deletions
Modulo-3.Ejercicios.md 0 → 100644
View page @ b33bcafe
## 🟦 Ejercicio 1: Agregar elementos a una lista
### **Enunciado**
Crea una página HTML con:
* Un campo de texto
* Un botón “Agregar”
* Una lista `<ul>`
Cuando el usuario escriba un texto y pulse el botón, se debe **agregar un nuevo `<li>` a la lista** con el texto ingresado.
dácticos**
* `getElementById`
* Tipado de elementos del DOM (`HTMLInputElement`, `HTMLUListElement`)
* Creación de nodos con `createElement`
---
## 🟦 Ejercicio 2: Eliminar elementos al hacer clic
### **Enunciado**
Partiendo de una lista con varios elementos, implementa la funcionalidad para que **al hacer clic sobre un elemento de la lista, este se elimine del DOM**.
dácticos**
* Manejo de eventos
* Uso de `Event` y `HTMLElement`
* Eliminación dinámica de nodos del DOM
---
## 🟦 Ejercicio 3: Lista dinámica con botones de eliminar
### **Enunciado**
Crea una aplicación que permita:
* Agregar elementos a una lista mediante un input y un botón.
* Cada elemento agregado debe incluir un **botón “Eliminar”** que borre solo ese elemento.
dácticos**
* Manipulación avanzada del DOM
* `event.target` y `closest`
* Composición de nodos (`appendChild`)
---
## 🟦 Ejercicio 4: 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 4</title>
</head>
<body>
<input type="text" id="itemInput" placeholder="Escribe un elemento" />
<button id="addButton">Agregar</button>
<ul id="itemList"></ul>
<script src="main.js"></script>
</body>
</html>
```
---
## 🟦 Ejercicio 5: 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 5</title>
</head>
<body>
<ul id="itemList">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<script src="main.js"></script>
</body>
</html>
```
---
### **Requisitos**
* Al hacer clic en un `<li>`, este debe eliminarse.
* Usar eventos desde TypeScript.
* No modificar el HTML inicial.
---
## 🟦 Ejercicio 6: 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 6</title>
</head>
<body>
<input type="text" id="itemInput" placeholder="Nuevo elemento" />
<button id="addButton">Agregar</button>
<ul id="itemList"></ul>
<script src="main.js"></script>
</body>
</html>
```
---
## 🟦 Ejercicio 7: 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 1</title>
</head>
<body>
<button id="alertButton">Mostrar alerta</button>
<script src="main.js"></script>
</body>
</html>
```
---
## 🟦 Ejercicio 8: Contador con intervalos
### **Enunciado**
Crea una página HTML con un párrafo `<p>` que muestre un **contador** que aumente de 1 en 1 cada segundo.
Incluye un botón **“Detener”** que detenga el contador.
### **HTML base**
```html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 8</title>
</head>
<body>
<p id="counter">0</p>
<button id="stopButton">Detener</button>
<script src="main.js"></script>
</body>
</html>
```
---
## 🟦 Ejercicio 9: 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 9</title>
</head>
<body>
<button id="startAlertsButton">Iniciar alertas</button>
<script src="main.js"></script>
</body>
</html>
```
---
## 🟦 Ejercicio 10: Cambiar el color de un párrafo
### **Enunciado**
Crea una página con un párrafo `<p>` 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 1</title>
</head>
<body>
<p id="myParagraph">Este es un párrafo que cambiará de color.</p>
<button id="colorButton">Cambiar color</button>
<script src="main.js"></script>
</body>
</html>
```
---
## 🟦 Ejercicio 11: 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 2</title>
<style>
.active {
background-color: blue;
color: white;
padding: 10px;
}
.inactive {
background-color: gray;
color: black;
padding: 10px;
}
</style>
</head>
<body>
<div id="myDiv" class="inactive">Este div cambiará de estilo.</div>
<button id="toggleButton">Activar/Desactivar</button>
<script src="main.js"></script>
</body>
</html>
```
---
## 🟦 Ejercicio 12: 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 3</title>
</head>
<body>
<p id="textParagraph">Texto que cambiará de tamaño y fuente.</p>
<button id="increaseSizeButton">Aumentar tamaño</button>
<button id="changeFontButton">Cambiar fuente</button>
<script src="main.js"></script>
</body>
</html>
```
---
## 🟦 Ejercicio 13: Mostrar todo el contenido de la variable
### **Enunciado**
Crea una página que muestre **todos los elementos de una variable `recursos`** en una lista `<ul>`. Cada elemento debe convertirse en un `<li>` con su contenido completo.
### **HTML base**
```html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio 1 - Mostrar variable</title>
</head>
<body>
<h1>Lista de recursos</h1>
<ul id="recursosList"></ul>
<script src="main.js"></script>
</body>
</html>
```
### **Variable hardcodeada sugerida**
```ts
interface Recurso {
id: number;
nombre: string;
tipoRecurso: string;
}
const recursos: Recurso[] = [
[
{
"id": "1h374h238dn394dhs8",
"nombre": "Ana López",
"tipoRecurso": "HUMANO",
"unidad": "AGRUSAN",
"comunidad": "Madrid",
"localidad": "Pozuelo de Alarcón",
"base": "General Cavalcanti",
"activaciones": [
{
"fechaHoraInicio": "2025-01-12T08:00:00",
"fechaHoraFin": "2025-01-12T14:30:00",
"tipoJornada": "PARCIAL",
"tipoSituacion": "ACTIVIDAD"
},
{
"fechaHoraInicio": "2025-01-13T07:00:00",
"fechaHoraFin": "2025-01-13T15:00:00",
"tipoJornada": "COMPLETA",
"tipoSituacion": "COMISION_SERVICIO"
}
]
},
{
"id": "hum-55ab-8821-kd92",
"nombre": "Carlos Medina",
"tipoRecurso": "HUMANO",
"unidad": "AGRUSAN",
"comunidad": "Madrid",
"localidad": "Pozuelo de Alarcón",
"base": "General Cavalcanti",
"activaciones": [
{
"fechaHoraInicio": "2025-03-10T07:00:00",
"fechaHoraFin": "2025-03-10T15:00:00",
"tipoJornada": "COMPLETA",
"tipoSituacion": "ACTIVIDAD"
},
{
"fechaHoraInicio": "2025-03-11T08:30:00",
"fechaHoraFin": "2025-03-11T14:00:00",
"tipoJornada": "PARCIAL",
"tipoSituacion": "FORMACION_NO_CERTIFICADA"
}
]
}
],
];
```
---
## 🟦 Ejercicio 14: Mostrar solo ciertos campos de la variable
### **Enunciado**
Muestra únicamente un campo específico de cada elemento (por ejemplo `nombre`) en la lista `<ul>`.
### **HTML base**
```html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio 2 - Campos específicos</title>
</head>
<body>
<h1>Nombres de recursos</h1>
<ul id="recursosList"></ul>
<script src="main.js"></script>
</body>
</html>
```
---
## 🟦 Ejercicio 15: 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio 3 - Filtrar variable</title>
</head>
<body>
<h1>Filtrar recursos por categoría</h1>
<input type="text" id="filterInput" placeholder="Escribe categoría">
<button id="filterButton">Filtrar</button>
<ul id="recursosList"></ul>
<script src="main.js"></script>
</body>
</html>
```
---
\ No newline at end of file