LECCIÓN 57 / 60 · Proyectos y autonomía

Proyecto: añade una tarea a un gestor

Al terminar, podrás: añadir y conservar una tarea en el navegador

Ruta esencialProyecto por hitos

Conviene conocer: Lección 11 · Lee un elemento de un array · Lección 31 · Responde a un clic con addEventListener

La idea clave

Un gestor de tareas conecta datos y pantalla. Primero necesitas añadir una tarea; después puedes marcarla, filtrar y guardarla para la próxima visita.

Ejemplo paso a paso

Este ejemplo muestra la idea en acción. Sigue los pasos y después cámbialo tú.

Primera pieza del proyecto
const tareas = [];
function agregar(texto) {
  tareas.push({ texto: texto, hecha: false });
}
agregar('Practicar JavaScript');
console.log(tareas);
  1. tareas empieza siendo una lista vacía.
  2. agregar introduce un objeto con texto y un estado inicial false.
  3. El proyecto real dibuja la lista, permite marcar tareas y usa localStorage para conservarlas.

Practica con código

Antes de empezar, piensa: ¿Qué estado inicial tiene una tarea recién creada?

Abre el gestor, añade dos tareas, marca una y recarga la página.

El resultado que buscamos

Las tareas siguen ahí tras recargar y la tarea terminada mantiene su estado.

Comprueba tu trabajo paso a paso

Esta actividad utiliza herramientas reales. No tiene corrección automática: solo tú puedes confirmar que has realizado cada paso.

Pasos para revisar

Marca todos los pasos después de realizarlos.

Necesito una pista

Utiliza la demo interactiva de tareas en su propia página.

Una pista más

La descarga del proyecto incluye el código de persistencia con localStorage.

Ver solución y explicación

La tarea comienza con hecha: false. En la demo puedes marcarla y comprobar la persistencia.

Qué debes recordar: Una tarea existe como dato antes de dibujarse y persistirse.

Actividad guiada: pendiente de autoevaluaciónContinuar en el proyecto →

La lectura, las prácticas corregidas y las autoevaluaciones guiadas se guardan por separado en este navegador.

Revisado editorialmente · Referencia técnica específica ↗