Capstone Project: Task Manager

Congratulations on making it to the final lesson! This capstone project brings together everything you have learned throughout this JavaScript course. You will build a complete task manager application step by step, using objects and prototypes, closures, async/await, error handling, DOM concepts, and modular design. Each section builds on the previous one, resulting in a fully functional system.

What You'll Build

A task data model with validation and state management
Persistent storage using a simulated async API
A modular architecture separating concerns
Full error handling and recovery
A rendering system that demonstrates DOM concepts

Step 1: The Task Model

Every application starts with its data model. We will create a Task constructor with validation, status management, and serialization:

// Task model with validation and methods
function Task(title, options) {
  options = options || {};

  // Validate required fields
  if (!title || typeof title !== "string" || title.trim().length === 0) {
    throw new Error("Task title is required and must be a non-empty string");
  }
  if (title.trim().length > 100) {
    throw new Error("Task title must be 100 characters or fewer");
  }

  this.id = options.id || Date.now() + Math.floor(Math.random() * 1000);
  this.title = title.trim();
  this.description = (options.description || "").trim();
  this.priority = ["low", "medium", "high"].includes(options.priority) ? options.priority : "medium";
  this.status = "pending";
  this.createdAt = new Date().toISOString();
  this.completedAt = null;
  this.tags = options.tags || [];
}

Task.prototype.complete = function() {
  if (this.status === "completed") {
    throw new Error("Task is already completed");
  }
  this.status = "completed";
  this.completedAt = new Date().toISOString();
};

Task.prototype.reopen = function() {
  this.status = "pending";
  this.completedAt = null;
};

Task.prototype.toString = function() {
  const check = this.status === "completed" ? "[x]" : "[ ]";
  const pri = "(" + this.priority.charAt(0).toUpperCase() + ")";
  return check + " " + pri + " " + this.title;
};

Task.prototype.toJSON = function() {
  return {
    id: this.id, title: this.title, description: this.description,
    priority: this.priority, status: this.status,
    createdAt: this.createdAt, completedAt: this.completedAt, tags: this.tags
  };
};

// Test the model
try {
  const task1 = new Task("Learn JavaScript", { priority: "high", tags: ["learning"] });
  const task2 = new Task("Buy groceries", { description: "Milk, eggs, bread" });
  const task3 = new Task("Exercise", { priority: "low" });

  console.log(task1.toString());
  console.log(task2.toString());
  console.log(task3.toString());

  task1.complete();
  console.log("\nAfter completing task 1:");
  console.log(task1.toString());

  // Test validation
  try { new Task(""); } catch (e) { console.log("\nValidation:", e.message); }
  try { task1.complete(); } catch (e) { console.log("Double complete:", e.message); }

  console.log("\nSerialized:", JSON.stringify(task1.toJSON(), null, 2));
} catch (error) {
  console.log("Error:", error.message);
}

Step 2: The Storage Layer

Real applications persist data. We will simulate an async storage API that mimics how you would interact with a server or database. This uses Promises and async/await:

// Simulated async storage with artificial delay
function createStorage() {
  let data = {};

  function delay(ms) {
    return new Promise(function(resolve) { setTimeout(resolve, ms); });
  }

  return {
    async save(key, value) {
      await delay(100); // Simulate network latency
      data[key] = JSON.stringify(value);
      return true;
    },

    async load(key) {
      await delay(100);
      if (!data[key]) return null;
      return JSON.parse(data[key]);
    },

    async remove(key) {
      await delay(50);
      delete data[key];
      return true;
    },

    async keys() {
      await delay(50);
      return Object.keys(data);
    }
  };
}

// Test the storage layer
async function testStorage() {
  const storage = createStorage();

  console.log("Saving tasks...");
  await storage.save("task-1", { title: "First task", status: "pending" });
  await storage.save("task-2", { title: "Second task", status: "completed" });

  console.log("Loading task-1...");
  const task = await storage.load("task-1");
  console.log("Loaded:", task);

  console.log("\nAll keys:", await storage.keys());

  await storage.remove("task-1");
  console.log("After remove:", await storage.keys());

  const missing = await storage.load("nonexistent");
  console.log("Missing key:", missing);
}

testStorage();

Step 3: The Task Manager Service

Now we combine the task model and storage into a service layer. This is the core business logic, handling creation, retrieval, filtering, and state transitions with proper error handling:

// Task manager service - the core of our application
function createTaskManager() {
  const tasks = new Map();
  let nextId = 1;

  // Event system using closures
  const listeners = {};

  function emit(event, data) {
    if (listeners[event]) {
      listeners[event].forEach(function(fn) { fn(data); });
    }
  }

  return {
    on(event, callback) {
      if (!listeners[event]) listeners[event] = [];
      listeners[event].push(callback);
    },

    addTask(title, options) {
      options = options || {};
      try {
        if (!title || title.trim().length === 0) {
          throw new Error("Title is required");
        }

        const id = nextId++;
        const task = {
          id: id,
          title: title.trim(),
          description: (options.description || "").trim(),
          priority: options.priority || "medium",
          status: "pending",
          createdAt: new Date().toISOString(),
          completedAt: null,
          tags: options.tags || []
        };

        tasks.set(id, task);
        emit("taskAdded", task);
        return task;
      } catch (error) {
        emit("error", { action: "addTask", message: error.message });
        return null;
      }
    },

    completeTask(id) {
      const task = tasks.get(id);
      if (!task) {
        emit("error", { action: "completeTask", message: "Task " + id + " not found" });
        return false;
      }
      if (task.status === "completed") {
        emit("error", { action: "completeTask", message: "Task already completed" });
        return false;
      }
      task.status = "completed";
      task.completedAt = new Date().toISOString();
      emit("taskCompleted", task);
      return true;
    },

    deleteTask(id) {
      if (!tasks.has(id)) {
        emit("error", { action: "deleteTask", message: "Task " + id + " not found" });
        return false;
      }
      const task = tasks.get(id);
      tasks.delete(id);
      emit("taskDeleted", task);
      return true;
    },

    getTasks(filter) {
      let result = Array.from(tasks.values());

      if (filter) {
        if (filter.status) {
          result = result.filter(function(t) { return t.status === filter.status; });
        }
        if (filter.priority) {
          result = result.filter(function(t) { return t.priority === filter.priority; });
        }
        if (filter.search) {
          const term = filter.search.toLowerCase();
          result = result.filter(function(t) {
            return t.title.toLowerCase().includes(term) ||
                   t.description.toLowerCase().includes(term);
          });
        }
      }

      return result;
    },

    getStats() {
      const all = Array.from(tasks.values());
      return {
        total: all.length,
        pending: all.filter(function(t) { return t.status === "pending"; }).length,
        completed: all.filter(function(t) { return t.status === "completed"; }).length,
        byPriority: {
          high: all.filter(function(t) { return t.priority === "high"; }).length,
          medium: all.filter(function(t) { return t.priority === "medium"; }).length,
          low: all.filter(function(t) { return t.priority === "low"; }).length
        }
      };
    }
  };
}

// Test the task manager
const manager = createTaskManager();

// Listen for events
manager.on("taskAdded", function(task) {
  console.log("+ Added: " + task.title);
});
manager.on("taskCompleted", function(task) {
  console.log("v Completed: " + task.title);
});
manager.on("taskDeleted", function(task) {
  console.log("x Deleted: " + task.title);
});
manager.on("error", function(err) {
  console.log("! Error [" + err.action + "]: " + err.message);
});

// Add tasks
manager.addTask("Build task manager", { priority: "high", tags: ["project"] });
manager.addTask("Write documentation", { priority: "medium" });
manager.addTask("Add unit tests", { priority: "high" });
manager.addTask("Deploy to production", { priority: "low" });
manager.addTask("Fix login bug", { priority: "high", description: "Users can't log in on mobile" });

// Complete and delete
manager.completeTask(1);
manager.completeTask(3);
manager.deleteTask(4);

// Error cases
manager.addTask("");
manager.completeTask(999);
manager.completeTask(1); // Already completed

// Display results
console.log("\n--- All Tasks ---");
manager.getTasks().forEach(function(t) {
  const check = t.status === "completed" ? "[x]" : "[ ]";
  console.log("  " + check + " #" + t.id + " " + t.title + " (" + t.priority + ")");
});

console.log("\n--- High Priority Only ---");
manager.getTasks({ priority: "high" }).forEach(function(t) {
  console.log("  #" + t.id + " " + t.title);
});

console.log("\n--- Stats ---");
console.log(manager.getStats());

Step 4: The Renderer

In a real app, the renderer updates the DOM. Here we simulate rendering with a text-based UI that demonstrates the same patterns you would use with real DOM manipulation:

// Text-based renderer simulating DOM updates
function createRenderer() {
  function renderTask(task) {
    const check = task.status === "completed" ? "[x]" : "[ ]";
    const pri = { high: "!!!", medium: "!! ", low: "!  " }[task.priority];
    let line = "  " + check + " " + pri + " #" + task.id + " " + task.title;
    if (task.description) {
      line += "\n       " + task.description;
    }
    if (task.tags && task.tags.length > 0) {
      line += "\n       Tags: " + task.tags.join(", ");
    }
    return line;
  }

  function renderList(tasks, title) {
    console.log("=".repeat(50));
    console.log("  " + title);
    console.log("=".repeat(50));

    if (tasks.length === 0) {
      console.log("  (no tasks)");
    } else {
      tasks.forEach(function(task) {
        console.log(renderTask(task));
      });
    }
    console.log("-".repeat(50));
  }

  function renderStats(stats) {
    console.log("\n  Stats: " + stats.total + " total | " +
      stats.pending + " pending | " + stats.completed + " completed");
    console.log("  Priority: " + stats.byPriority.high + " high | " +
      stats.byPriority.medium + " medium | " + stats.byPriority.low + " low");
  }

  return { renderTask, renderList, renderStats };
}

// Build the complete app
function createApp() {
  const tasks = new Map();
  let nextId = 1;
  const renderer = createRenderer();

  function addTask(title, options) {
    options = options || {};
    const task = {
      id: nextId++, title: title.trim(),
      description: options.description || "",
      priority: options.priority || "medium",
      status: "pending", tags: options.tags || [],
      createdAt: new Date().toISOString(), completedAt: null
    };
    tasks.set(task.id, task);
    return task;
  }

  function complete(id) {
    const task = tasks.get(id);
    if (task) { task.status = "completed"; task.completedAt = new Date().toISOString(); }
  }

  function getAll() { return Array.from(tasks.values()); }
  function getPending() { return getAll().filter(function(t) { return t.status === "pending"; }); }
  function getCompleted() { return getAll().filter(function(t) { return t.status === "completed"; }); }

  function getStats() {
    const all = getAll();
    return {
      total: all.length,
      pending: getPending().length,
      completed: getCompleted().length,
      byPriority: {
        high: all.filter(function(t) { return t.priority === "high"; }).length,
        medium: all.filter(function(t) { return t.priority === "medium"; }).length,
        low: all.filter(function(t) { return t.priority === "low"; }).length
      }
    };
  }

  return { addTask, complete, getAll, getPending, getCompleted, getStats, renderer };
}

// Run the app
const app = createApp();

app.addTask("Design database schema", { priority: "high", tags: ["backend"], description: "PostgreSQL tables for users and tasks" });
app.addTask("Create API endpoints", { priority: "high", tags: ["backend", "api"] });
app.addTask("Build login page", { priority: "medium", tags: ["frontend"] });
app.addTask("Write README", { priority: "low", tags: ["docs"] });
app.addTask("Set up CI/CD", { priority: "medium", tags: ["devops"] });

app.complete(1);
app.complete(2);

app.renderer.renderList(app.getAll(), "All Tasks");
app.renderer.renderStats(app.getStats());

console.log("");
app.renderer.renderList(app.getPending(), "Pending Tasks");

Step 5: Putting It All Together

The final version combines everything: a modular task manager with async persistence, event-driven updates, error handling, and rendering. This is the architecture pattern used in real-world applications:

// Complete task manager application
const TaskApp = (function() {
  // Private state (closure)
  const tasks = new Map();
  const listeners = {};
  let nextId = 1;
  const history = [];

  // Event system
  function on(event, fn) {
    if (!listeners[event]) listeners[event] = [];
    listeners[event].push(fn);
  }

  function emit(event, data) {
    if (listeners[event]) {
      listeners[event].forEach(function(fn) { fn(data); });
    }
  }

  // Async storage simulation
  async function saveState() {
    return new Promise(function(resolve) {
      setTimeout(function() {
        resolve(true);
      }, 50);
    });
  }

  // Core operations
  async function add(title, options) {
    options = options || {};
    try {
      if (!title || title.trim().length === 0) throw new Error("Title required");

      const task = {
        id: nextId++, title: title.trim(),
        priority: options.priority || "medium",
        status: "pending", createdAt: new Date().toISOString()
      };
      tasks.set(task.id, task);
      history.push({ action: "add", taskId: task.id, time: Date.now() });
      await saveState();
      emit("change", { type: "added", task });
      return task;
    } catch (e) {
      emit("error", e.message);
      return null;
    }
  }

  async function toggle(id) {
    const task = tasks.get(id);
    if (!task) { emit("error", "Task not found"); return false; }
    task.status = task.status === "pending" ? "completed" : "pending";
    history.push({ action: "toggle", taskId: id, time: Date.now() });
    await saveState();
    emit("change", { type: "toggled", task });
    return true;
  }

  async function remove(id) {
    if (!tasks.has(id)) { emit("error", "Task not found"); return false; }
    const task = tasks.get(id);
    tasks.delete(id);
    history.push({ action: "remove", taskId: id, time: Date.now() });
    await saveState();
    emit("change", { type: "removed", task });
    return true;
  }

  function query(filter) {
    let result = Array.from(tasks.values());
    if (filter && filter.status) result = result.filter(function(t) { return t.status === filter.status; });
    if (filter && filter.priority) result = result.filter(function(t) { return t.priority === filter.priority; });
    return result;
  }

  function stats() {
    const all = Array.from(tasks.values());
    return {
      total: all.length,
      pending: all.filter(function(t) { return t.status === "pending"; }).length,
      completed: all.filter(function(t) { return t.status === "completed"; }).length,
      actions: history.length
    };
  }

  // Public API (module pattern)
  return { on, add, toggle, remove, query, stats };
})();

// Wire up event handlers
TaskApp.on("change", function(event) {
  const symbol = { added: "+", toggled: "~", removed: "-" }[event.type];
  console.log(symbol + " " + event.type + ": " + event.task.title);
});

TaskApp.on("error", function(message) {
  console.log("ERROR: " + message);
});

// Run the application
async function main() {
  console.log("--- Task Manager v1.0 ---\n");

  await TaskApp.add("Set up project structure", { priority: "high" });
  await TaskApp.add("Implement user auth", { priority: "high" });
  await TaskApp.add("Design landing page", { priority: "medium" });
  await TaskApp.add("Write API docs", { priority: "low" });
  await TaskApp.add("Performance audit", { priority: "medium" });

  await TaskApp.toggle(1); // Complete first task
  await TaskApp.toggle(2); // Complete second task
  await TaskApp.remove(4); // Remove docs task

  // Error cases
  await TaskApp.add("");       // Empty title
  await TaskApp.toggle(999);   // Non-existent task

  console.log("\n--- Current State ---");
  TaskApp.query().forEach(function(t) {
    const check = t.status === "completed" ? "[x]" : "[ ]";
    console.log("  " + check + " " + t.title + " (" + t.priority + ")");
  });

  console.log("\n--- Pending High Priority ---");
  TaskApp.query({ status: "pending", priority: "high" }).forEach(function(t) {
    console.log("  " + t.title);
  });

  console.log("\n--- Statistics ---");
  const s = TaskApp.stats();
  console.log("  Total: " + s.total + " | Pending: " + s.pending + " | Completed: " + s.completed);
  console.log("  Total actions recorded: " + s.actions);
}

main();

Try It Yourself

Extend the task manager with a priority sorter and statistics dashboard:

// Extended task manager: add your own features!
function createApp() {
  const tasks = [
    { id: 1, title: "Finish capstone project", priority: "high", completed: false, hours: 4 },
    { id: 2, title: "Review pull requests", priority: "high", completed: true, hours: 2 },
    { id: 3, title: "Update dependencies", priority: "medium", completed: false, hours: 1 },
    { id: 4, title: "Write blog post", priority: "low", completed: false, hours: 3 },
    { id: 5, title: "Fix login bug", priority: "high", completed: true, hours: 2 },
    { id: 6, title: "Add dark mode", priority: "low", completed: false, hours: 5 },
    { id: 7, title: "Optimize images", priority: "medium", completed: true, hours: 1 },
    { id: 8, title: "Set up monitoring", priority: "medium", completed: false, hours: 3 }
  ];

  // Sort by priority (high -> medium -> low), then by completion
  function sortByPriority(taskList) {
    const order = { high: 0, medium: 1, low: 2 };
    return taskList.slice().sort(function(a, b) {
      if (a.completed !== b.completed) return a.completed ? 1 : -1;
      return order[a.priority] - order[b.priority];
    });
  }

  // Statistics dashboard
  function getStats() {
    const total = tasks.length;
    const completed = tasks.filter(function(t) { return t.completed; }).length;
    const active = total - completed;
    const totalHours = tasks.reduce(function(sum, t) { return sum + t.hours; }, 0);
    const remainingHours = tasks.filter(function(t) { return !t.completed; })
      .reduce(function(sum, t) { return sum + t.hours; }, 0);

    const byPriority = { high: 0, medium: 0, low: 0 };
    tasks.filter(function(t) { return !t.completed; }).forEach(function(t) {
      byPriority[t.priority]++;
    });

    return { total, completed, active, totalHours, remainingHours, byPriority };
  }

  function renderDashboard() {
    const stats = getStats();
    const pct = Math.round((stats.completed / stats.total) * 100);
    const barFilled = Math.floor(pct / 5);
    const bar = "=".repeat(barFilled) + "-".repeat(20 - barFilled);

    console.log("+====================================+");
    console.log("|        PROJECT DASHBOARD           |");
    console.log("+====================================+");
    console.log("|  Progress: [" + bar + "] " + pct + "%");
    console.log("|  Tasks: " + stats.completed + "/" + stats.total + " completed");
    console.log("|  Hours: " + stats.remainingHours + "h remaining of " + stats.totalHours + "h total");
    console.log("|");
    console.log("|  Active by priority:");
    console.log("|    High:   " + stats.byPriority.high + " tasks");
    console.log("|    Medium: " + stats.byPriority.medium + " tasks");
    console.log("|    Low:    " + stats.byPriority.low + " tasks");
    console.log("+====================================+");

    console.log("\nSorted task list:");
    const sorted = sortByPriority(tasks);
    sorted.forEach(function(t) {
      const check = t.completed ? "x" : " ";
      const pri = { high: "HIGH", medium: "MED ", low: "LOW " }[t.priority];
      console.log("  [" + check + "] " + pri + " | " + t.title + " (" + t.hours + "h)");
    });
  }

  renderDashboard();
}

createApp();

Key Takeaways

Objects and Prototypes: The Task model uses constructor functions and prototypes for shared behavior across all task instances
Closures: The module pattern keeps internal state private and exposes only the public API
Async/Await: Storage operations are asynchronous, just like real server calls would be
Error Handling: Every operation validates input and handles errors gracefully without crashing
DOM Concepts: The renderer follows the same pattern as real DOM manipulation: read state, build output, update display
Modules: Separating concerns (model, storage, service, renderer) makes code maintainable and testable

What's Next?

You have completed the JavaScript course! Here is what you can do to keep growing:

Build real projects: Take this task manager and implement it with actual DOM manipulation in a browser
Learn a framework: React, Vue, or Svelte build on everything you have learned here
Explore TypeScript: Add type safety to your JavaScript for larger projects
Study design patterns: Observer, Factory, Strategy, and other patterns appear throughout professional code
Contribute to open source: Reading and contributing to real codebases accelerates learning like nothing else

Pro Tip: When building any application, start with the data layer and work outward. Get your store and business logic right first, test it in isolation, then add persistence, then build the UI on top. This approach means each layer can be tested and debugged independently, and swapping out one layer (say, replacing a mock API with a real one) does not require rewriting everything else.

Next Steps

With the capstone behind you, it is time to deepen your JavaScript toolkit. Next up is a deep dive into array methods — the functional building blocks you will reach for in nearly every project.

Continue to Array Methods -->

Destructuring And Spread

Also learn

Also learn