Skip to content

GitLab

Modulo 3.Ejercicios · Changes

Page history
correciones sobre correciones authored by imunnic's avatar imunnic
Hide whitespace changes
Inline Side-by-side
Showing with 23 additions and 71 deletions
Modulo-3.Ejercicios.md
View page @ 3f744054
......@@ -2,54 +2,6 @@
### **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.
* `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**.
* 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.
* 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**.
---
......@@ -61,7 +13,7 @@ Crea un script en TypeScript que permita agregar elementos a una lista cuando el
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 4</title>
<title>Ejercicio 1</title>
</head>
<body>
......@@ -77,7 +29,7 @@ Crea un script en TypeScript que permita agregar elementos a una lista cuando el
---
## Ejercicio 5: Eliminar elementos al hacer clic
## Ejercicio 2: Eliminar elementos al hacer clic
### **Enunciado**
......@@ -92,7 +44,7 @@ Crea un script en TypeScript que permita eliminar un elemento de la lista **haci
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 5</title>
<title>Ejercicio 2</title>
</head>
<body>
......@@ -117,7 +69,7 @@ Crea un script en TypeScript que permita eliminar un elemento de la lista **haci
---
## Ejercicio 6: Lista dinámica con botón eliminar
## Ejercicio 3: Lista dinámica con botón eliminar
### **Enunciado**
......@@ -132,7 +84,7 @@ Desarrolla una aplicación que permita agregar elementos a una lista y eliminar
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 6</title>
<title>Ejercicio 3</title>
</head>
<body>
......@@ -148,7 +100,7 @@ Desarrolla una aplicación que permita agregar elementos a una lista y eliminar
---
## Ejercicio 7: Alerta después de un tiempo
## Ejercicio 4: Alerta después de un tiempo
### **Enunciado**
......@@ -162,7 +114,7 @@ Cuando el usuario haga clic en el botón, se debe mostrar una **alerta** despué
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 1</title>
<title>Ejercicio 4</title>
</head>
<body>
......@@ -175,7 +127,7 @@ Cuando el usuario haga clic en el botón, se debe mostrar una **alerta** despué
---
## Ejercicio 8: Contador con intervalos
## Ejercicio 5: Contador con intervalos
### **Enunciado**
......@@ -189,7 +141,7 @@ Incluye un botón **“Detener”** que detenga el contador.
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 8</title>
<title>Ejercicio 5</title>
</head>
<body>
......@@ -203,7 +155,7 @@ Incluye un botón **“Detener”** que detenga el contador.
---
## Ejercicio 9: Alerta periódica con límite
## Ejercicio 6: Alerta periódica con límite
### **Enunciado**
......@@ -217,7 +169,7 @@ Cuando se pulse el botón, se debe mostrar una **alerta cada 3 segundos** durant
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 9</title>
<title>Ejercicio 6</title>
</head>
<body>
......@@ -230,7 +182,7 @@ Cuando se pulse el botón, se debe mostrar una **alerta cada 3 segundos** durant
---
## Ejercicio 10: Cambiar el color de un párrafo
## Ejercicio 7: Cambiar el color de un párrafo
### **Enunciado**
......@@ -244,7 +196,7 @@ Cuando el usuario haga clic en el botón, el párrafo debe cambiar su color a ro
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 1</title>
<title>Ejercicio 7</title>
</head>
<body>
......@@ -258,7 +210,7 @@ Cuando el usuario haga clic en el botón, el párrafo debe cambiar su color a ro
---
## Ejercicio 11: Alternar clases CSS
## Ejercicio 8: Alternar clases CSS
### **Enunciado**
......@@ -272,7 +224,7 @@ Cuando se haga clic, el div debe alternar entre dos estilos definidos en CSS (po
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 2</title>
<title>Ejercicio 8</title>
<style>
.active {
background-color: blue;
......@@ -298,7 +250,7 @@ Cuando se haga clic, el div debe alternar entre dos estilos definidos en CSS (po
---
## Ejercicio 12: Cambiar tamaño y fuente de un elemento
## Ejercicio 9: Cambiar tamaño y fuente de un elemento
### **Enunciado**
......@@ -314,7 +266,7 @@ Crea un párrafo y dos botones:
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 3</title>
<title>Ejercicio 9</title>
</head>
<body>
......@@ -329,7 +281,7 @@ Crea un párrafo y dos botones:
---
## Ejercicio 13: Mostrar todo el contenido de la variable
## 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 `<ul>`. Cada elemento debe convertirse en un `<li>` con su contenido completo.
......@@ -340,7 +292,7 @@ Crea una página que muestre **todos los elementos de una variable `recursos`**
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio 1 - Mostrar variable</title>
<title>Ejercicio 10 - Mostrar variable</title>
</head>
<body>
......@@ -414,7 +366,7 @@ const recursos: Recurso[] = [
---
## Ejercicio 14: Mostrar solo ciertos campos de la variable
## Ejercicio 11: Mostrar solo ciertos campos de la variable
### **Enunciado**
Muestra únicamente un campo específico de cada elemento (por ejemplo `nombre`) en la lista `<ul>`.
......@@ -425,7 +377,7 @@ Muestra únicamente un campo específico de cada elemento (por ejemplo `nombre`)
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio 2 - Campos específicos</title>
<title>Ejercicio 11 - Campos específicos</title>
</head>
<body>
......@@ -439,7 +391,7 @@ Muestra únicamente un campo específico de cada elemento (por ejemplo `nombre`)
---
## Ejercicio 15: Filtrar y mostrar según un criterio
## Ejercicio 12: Filtrar y mostrar según un criterio
### **Enunciado**
Crea un input de texto y un botón **“Filtrar”**.
......@@ -451,7 +403,7 @@ Cuando el usuario escriba un valor y pulse el botón, se deben mostrar **solo lo
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio 3 - Filtrar variable</title>
<title>Ejercicio 12 - Filtrar variable</title>
</head>
<body>
......