Create the Task State

Open js/app.js. Start by giving the application one place to store its tasks.

Add a tasks array near the top of the file. Use the same six fields you identified in Module 1.

javascript

let tasks = [
  {
    id: 1,
    title: "Plan the project",
    description: "Write down the first few tasks for the board.",
    priority: "high",
    status: "todo",
    date: "2026-09-18"
  },
  {
    id: 2,
    title: "Review requirements",
    description: "Check what the task manager should support.",
    priority: "medium",
    status: "todo",
    date: "2026-09-20"
  },
  {
    id: 3,
    title: "Build the interface",
    description: "Turn the prepared design into a working project.",
    priority: "medium",
    status: "progress",
    date: "2026-09-22"
  },
  {
    id: 4,
    title: "Choose the board layout",
    description: "Keep the first version simple and focused.",
    priority: "low",
    status: "done",
    date: "2026-09-15"
  }
];

The exact sample values are not important. What matters is the shape of each object and the fact that status matches the column’s data-status value.

For now, do not remove the sample cards from the HTML. We will stop depending on them when the renderer is ready.

Checkpoint

Open the browser console and run:

javascript

console.log(tasks);

You should see an array containing your task objects. Change one task’s title in app.js, refresh, and confirm the console shows the new value.