Inicio > Cursos > JavaScript > Proyecto: Gestor de Tareas
JavaScriptJavaScript AvanzadoLección 21 de 24

Proyecto: Gestor de Tareas

En esta lección final construirás un gestor de tareas completo, aplicando todo lo aprendido en el curso. Un gestor de tareas parece simple pero requiere casi todos los conceptos fundamentales: clases para modelar las tareas, arrays y métodos funcionales para gestionarlas, localStorage para persistir datos, async/await para simular una API, y manejo de errores robusto.

Esta es la diferencia entre saber conceptos aislados y saber programar: integrar múltiples herramientas para resolver un problema real. Al terminar este proyecto tendrás una aplicación funcional que puedes mostrar en tu portafolio y el patrón mental para abordar proyectos más complejos.

class GestorTareas {
  #tareas = []; // Campo privado (ES2022)
  
  agregar(titulo, prioridad = "media") {
    const tarea = {
      id: Date.now(),
      titulo,
      prioridad,
      completada: false,
      creada: new Date().toISOString()
    };
    this.#tareas.push(tarea);
    return tarea;
  }
  
  completar(id) {
    const tarea = this.#tareas.find(t => t.id === id);
    if (!tarea) throw new Error(`Tarea ${id} no encontrada`);
    tarea.completada = true;
    return tarea;
  }
  
  filtrar(prioridad) {
    return this.#tareas.filter(t => t.prioridad === prioridad);
  }
  
  get pendientes() {
    return this.#tareas.filter(t => !t.completada);
  }
  
  async guardar() {
    const json = JSON.stringify(this.#tareas);
    localStorage.setItem("tareas", json);
    console.log("Guardado exitosamente");
  }
  
  async cargar() {
    const json = localStorage.getItem("tareas");
    if (json) this.#tareas = JSON.parse(json);
  }
}

const gestor = new GestorTareas();
gestor.agregar("Aprender JavaScript", "alta");
gestor.agregar("Hacer ejercicio", "media");
console.log(gestor.pendientes.length); // 2
Consejo🏆 Este proyecto usa: clase con campo privado (#), getters, async/await, métodos find/filter/map, error handling y localStorage.
← Web Workers: Hilos en el NavegadorProyecto Final: Juego de Trivia →

Practica esta lección

Resuelve los ejercicios del curso de JavaScript en la app, gratis y con corrección automática.

Empezar a practicar