Intermediate project · Week 4

Professional Task Manager

Create, edit, filter, search, prioritize, and persist accessible tasks.

The problem

Every real product has a task/list-like feature — this project is the DOM, events, and storage lessons applied to the single most common UI pattern in software.

User stories

As a user, I want to add, edit, and delete tasks, so I can manage my work.
As a user, I want to filter tasks by completed/active, so I can focus on what's left.
As a user, I want my tasks saved between visits, so I don't lose my list on refresh.

Planning checklist

Define the task data shape (id, title, done, priority, createdAt)
List every state the list can be in (empty, filtered-empty, populated)
Decide the persistence strategy (when to save, what key to use)

Suggested data structure

const task = { id: "t1", title: "Write report", done: false, priority: "high", createdAt: Date.now() };

UI requirements

An accessible form to add tasks with keyboard support
A list with edit, complete-toggle, and delete controls per task
Filter controls for status and a search input

Build milestones

Check off each milestone as you complete it — saved to this device.

…

Testing checklist

Adding a task updates both the list and localStorage
Filtering shows the correct subset for each filter state
Deleting a task removes exactly one task, not more

Completion criteria

…

Progressive support

RequirementsPlanningStarterHintsReference Solution

Bonus features

Add drag-to-reorder
Add due dates with overdue highlighting
Add undo for accidental deletes