Modulo 3.Ejercicios

This is an old version of this page. You can view the most recent version or browse the history.

🟦 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

<!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

<!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

<!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

<!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

<!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

<!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

<!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

<!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

<!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

<!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

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

<!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

<!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>