Proyecto: lista de tareas

1.Qué vas a construir

Vas a crear una aplicación de tareas completa, la «lista de pendientes» que casi todo programador ha hecho alguna vez. Reúne todo lo que has aprendido: variables, decisiones, bucles, funciones, arrays, objetos, el DOM, eventos, formularios, JSON y localStorage.

2.Plan: los datos y las funciones

El modelo de datos

{ id: 1712345678, texto: "Estudiar JavaScript", hecha: false }

// Toda la aplicación vive en este array:
let tareas = [
  { id: 1, texto: "Estudiar JavaScript", hecha: false },
  { id: 2, texto: "Hacer ejercicio",     hecha: true  },
];

// Y en una variable para el filtro actual:
let filtro = "todas";     // "todas" | "pendientes" | "hechas"

Las funciones que necesitas

Además, cuatro manejadores de eventos: enviar el formulario, pulsar dentro de la lista (marcar y borrar, con delegación), pulsar un filtro y pulsar «Borrar completadas».

3.La estructura del <li>

Para que tu código y las pruebas del ejercicio se entiendan, cada tarea debe pintarse con esta estructura:

<li data-id="1712345678" class="hecha">      <!-- la clase "hecha" solo si está completada -->
  <input type="checkbox" class="check" checked aria-label="Marcar como hecha">
  <span class="texto">Estudiar JavaScript</span>
  <button type="button" class="borrar" aria-label="Borrar tarea">✕</button>
</li>

• El id de la tarea se guarda en data-id para saber cuál es.
• El texto va en un <span class="texto"> y se inserta con textContent.
• La casilla y el botón llevan aria-label, porque no tienen texto visible.
• Los botones de filtro ya están en el HTML con data-filtro y aria-pressed.

4.Paso a paso

Paso 1 · Datos y almacenamiento

const CLAVE = "tareas";
let tareas = [];
let filtro = "todas";

function cargar() {
  try { return JSON.parse(localStorage.getItem(CLAVE)) ?? []; }
  catch { return []; }
}
function guardar() {
  localStorage.setItem(CLAVE, JSON.stringify(tareas));
}

Paso 2 · Pintar

pintar() recorre visibles(), crea un <li> por tarea con crearElemento() y los coloca en la lista con lista.replaceChildren(...). Después actualiza el contador ("1 pendiente" o "3 pendientes") y marca con aria-pressed="true" el botón del filtro activo.

Paso 3 · Añadir tareas

Escucha submit en el formulario: preventDefault(), recorta el texto, si está vacío muestra el error en #error; si no, añade { id, texto, hecha: false } al array, vacía el campo y llama a cambiar().

Paso 4 · Marcar y borrar con delegación

Un solo manejador de click en #lista: busca el li con e.target.closest("li"), localiza la tarea por su data-id y, según el elemento pulsado (.check o .borrar), cambia hecha o elimina la tarea. Termina con cambiar().

Paso 5 · Filtros y limpiar

Los botones [data-filtro] cambian la variable filtro y llaman a pintar(). «Borrar completadas» deja en el array solo las pendientes (filter) y llama a cambiar().

Paso 6 · Arrancar

Escribe iniciar() (carga los datos, restablece el filtro y pinta) y llámala al final del script. Prueba: añade tareas, recarga con F5 en tu propia página y comprueba que siguen ahí.

5.Revisión de calidad

6.Retos para ir más lejos

• Editar una tarea con doble clic.
• Añadir una fecha límite y ordenar por ella.
• Un botón «Marcar todas» y otro de deshacer el último borrado.
• Guardar el filtro elegido en localStorage.
• Dividir el código en módulos (almacenamiento.js, vista.js, app.js).
• Cargar tareas de ejemplo desde una API con fetch.
• Arrastrar y soltar para reordenar (API *Drag and Drop*).
• Reescribirla con un framework (React, Vue, Svelte) y comparar.

7.Qué sigue en tu camino

Con este curso ya sabes programar en JavaScript y construir interfaces interactivas. El camino hacia el desarrollo full stack tiene estas paradas:

Y el consejo de siempre: construye cosas. Una calculadora, un juego del ahorcado, un clon de tu app favorita. Cada proyecto te enseña algo que ningún curso puede enseñarte.

8.Errores frecuentes en el proyecto

• Modificar el DOM a mano en lugar de cambiar los datos y volver a pintar: la pantalla y el array se desincronizan.
• Olvidar guardar() tras un cambio: al recargar se pierde.
• Usar el índice del array como id.
• innerHTML con el texto de la tarea.
• Un manejador por tarea (en lugar de delegación) que se duplica al repintar.
• Comparar ids de tipo texto con ids numéricos (li.dataset.id es texto: conviértelo con Number()).
• Leer localStorage sin valor por defecto ni try/catch.
• No volver a pintar después de cambiar el filtro.

9.Glosario