Title: Actividad 9: DOM (selección, modificación y eventos)
Course: 2025 - LI - Desarrollo Web del Lado del Servidor 2-2 > Section: Unidad 1 - Introducción al Desarrollo Web

Objetivo

Practicar la manipulación del DOM: seleccionar elementos, leer/modificar contenido y atributos, crear/eliminar nodos, reaccionar a eventos y modificar clases/estilos de forma dinámica.

Instrucciones

1. Identificación
Al inicio de ambos archivos coloca un comentario con tu nombre completo y el nombre del profesor.

<!-- Alumno: [Tu nombre] | Profesor: [Nombre del profesor] -->


1. Archivos base (no cambies la estructura HTML, solo completa el JS y si quieres el CSS)
Crea tres archivos: index.html, styles.css, app.js.

index.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Actividad 9 - Práctica DOM</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <!-- Encabezado -->
  <header class="header">
    <h1 id="titulo">Lista de Tareas</h1>
    <button id="btnCambiarTitulo">Cambiar título</button>
  </header>

  <!-- Formulario -->
  <section class="panel">
    <form id="formTarea">
      <input type="text" id="inputTarea" placeholder="Escribe una tarea..." />
      <button id="btnAgregar" type="submit">Agregar</button>
      <button id="btnLimpiar" type="button">Limpiar lista</button>
    </form>
  </section>

  <!-- Contenido -->
  <main class="contenido">
    <ul id="listaTareas" class="lista">
      <li class="item">Ejemplo inicial (puedes eliminarme)</li>
    </ul>
  </main>

  <!-- Controles extra -->
  <section class="controles">
    <button id="btnToggleEstilos" type="button">Alternar estilo de la lista</button>
    <button id="btnContar" type="button">Contar tareas</button>
    <p id="mensaje"></p>
  </section>

  <script src="app.js"></script>
</body>
</html>


styles.css (opcional, solo base)

/* Alumno: [Tu nombre] | Profesor: [Nombre del profesor] */
body { font-family: Arial, sans-serif; margin: 24px; }
.header, .panel, .controles { margin-bottom: 16px; }
.lista { padding-left: 20px; }
.item { margin: 6px 0; }
.destacado { background: #f0f8ff; border-left: 4px solid #007bff; padding-left: 8px; }
.oculto { display: none; }


1. Tu tarea (en app.js)
Implementa lo siguiente usando DOM + eventos (no uses librerías):

A) Selección y modificación de contenido

- Al hacer clic en #btnCambiarTitulo, cambia el texto de #titulo por “Mi lista de pendientes” y muestra un alert indicando que el título cambió.

B) Agregar tareas

- Intercepta el submit del #formTarea con addEventListener("submit", …) para:
  - Evitar el comportamiento por defecto.
  - Validar que #inputTarea no esté vacío (si está vacío, muestra un mensaje en #mensaje).
  - Crear dinámicamente un <li> con clase item y el texto del input.
  - Agregar dentro del <li> un botón “Eliminar” que quite ese <li> cuando se presione.
  - Vaciar el input después de agregar.

C) Limpiar lista

- Al hacer clic en #btnLimpiar, elimina todos los <li> dentro de #listaTareas y actualiza #mensaje a “Lista vacía”.

D) Alternar estilos

- Al hacer clic en #btnToggleEstilos, alterna la clase destacado en #listaTareas usando classList.toggle().

E) Contar elementos

- Al hacer clic en #btnContar, recorre los <li> de #listaTareas con querySelectorAll(".item") y muestra en #mensaje el total actual (ej. “Tareas: 4”).

F) Delegación de eventos (plus de práctica)

- Implementa la eliminación de tareas usando delegación de eventos: en lugar de poner un addEventListener por cada botón “Eliminar”, agrega uno solo al #listaTareas y detecta si el objetivo del clic fue un botón de eliminar.

Pistas de DOM útiles (no es la solución, solo guía):
document.getElementById(), document.querySelector(), textContent, innerText, createElement(), appendChild(), classList.add/remove/toggle, event.target, event.preventDefault().

1. Reflexión (breve)
En 5–6 líneas responde en tu PDF:

- ¿Qué ventajas encontraste en usar delegación de eventos?
- ¿Qué parte te costó más: crear nodos, validar, o alternar clases? ¿Por qué?

1. Evidencia

- Capturas de la página funcionando (agregar, eliminar, limpiar, alternar estilo, contar).
- Código de app.js (y styles.css si lo editaste).
- Todo en un PDF.

Método de entrega

Convierte tu evidencia en PDF y súbela a la plataforma.

Objetivo

Practicar la manipulación del DOM: seleccionar elementos, leer/modificar contenido y atributos, crear/eliminar nodos, reaccionar a eventos y modificar clases/estilos de forma dinámica.

Instrucciones

1. Identificación
Al inicio de ambos archivos coloca un comentario con tu nombre completo y el nombre del profesor.

<!-- Alumno: [Tu nombre] | Profesor: [Nombre del profesor] -->


1. Archivos base (no cambies la estructura HTML, solo completa el JS y si quieres el CSS)
Crea tres archivos: index.html, styles.css, app.js.

index.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Actividad 9 - Práctica DOM</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <!-- Encabezado -->
  <header class="header">
    <h1 id="titulo">Lista de Tareas</h1>
    <button id="btnCambiarTitulo">Cambiar título</button>
  </header>

  <!-- Formulario -->
  <section class="panel">
    <form id="formTarea">
      <input type="text" id="inputTarea" placeholder="Escribe una tarea..." />
      <button id="btnAgregar" type="submit">Agregar</button>
      <button id="btnLimpiar" type="button">Limpiar lista</button>
    </form>
  </section>

  <!-- Contenido -->
  <main class="contenido">
    <ul id="listaTareas" class="lista">
      <li class="item">Ejemplo inicial (puedes eliminarme)</li>
    </ul>
  </main>

  <!-- Controles extra -->
  <section class="controles">
    <button id="btnToggleEstilos" type="button">Alternar estilo de la lista</button>
    <button id="btnContar" type="button">Contar tareas</button>
    <p id="mensaje"></p>
  </section>

  <script src="app.js"></script>
</body>
</html>


styles.css (opcional, solo base)

/* Alumno: [Tu nombre] | Profesor: [Nombre del profesor] */
body { font-family: Arial, sans-serif; margin: 24px; }
.header, .panel, .controles { margin-bottom: 16px; }
.lista { padding-left: 20px; }
.item { margin: 6px 0; }
.destacado { background: #f0f8ff; border-left: 4px solid #007bff; padding-left: 8px; }
.oculto { display: none; }


1. Tu tarea (en app.js)
Implementa lo siguiente usando DOM + eventos (no uses librerías):

A) Selección y modificación de contenido

- Al hacer clic en #btnCambiarTitulo, cambia el texto de #titulo por “Mi lista de pendientes” y muestra un alert indicando que el título cambió.

B) Agregar tareas

- Intercepta el submit del #formTarea con addEventListener("submit", …) para:
  - Evitar el comportamiento por defecto.
  - Validar que #inputTarea no esté vacío (si está vacío, muestra un mensaje en #mensaje).
  - Crear dinámicamente un <li> con clase item y el texto del input.
  - Agregar dentro del <li> un botón “Eliminar” que quite ese <li> cuando se presione.
  - Vaciar el input después de agregar.

C) Limpiar lista

- Al hacer clic en #btnLimpiar, elimina todos los <li> dentro de #listaTareas y actualiza #mensaje a “Lista vacía”.

D) Alternar estilos

- Al hacer clic en #btnToggleEstilos, alterna la clase destacado en #listaTareas usando classList.toggle().

E) Contar elementos

- Al hacer clic en #btnContar, recorre los <li> de #listaTareas con querySelectorAll(".item") y muestra en #mensaje el total actual (ej. “Tareas: 4”).

F) Delegación de eventos (plus de práctica)

- Implementa la eliminación de tareas usando delegación de eventos: en lugar de poner un addEventListener por cada botón “Eliminar”, agrega uno solo al #listaTareas y detecta si el objetivo del clic fue un botón de eliminar.

Pistas de DOM útiles (no es la solución, solo guía):
document.getElementById(), document.querySelector(), textContent, innerText, createElement(), appendChild(), classList.add/remove/toggle, event.target, event.preventDefault().

1. Reflexión (breve)
En 5–6 líneas responde en tu PDF:

- ¿Qué ventajas encontraste en usar delegación de eventos?
- ¿Qué parte te costó más: crear nodos, validar, o alternar clases? ¿Por qué?

1. Evidencia

- Capturas de la página funcionando (agregar, eliminar, limpiar, alternar estilo, contar).
- Código de app.js (y styles.css si lo editaste).
- Todo en un PDF.

Método de entrega

Convierte tu evidencia en PDF y súbela a la plataforma.