JavaScript capstone project

Build a resilient learning planner

Create a task planner that combines validated form input, derived UI state, delegated events, storage, accessible status messages, and deliberate error handling. The preview runs on this page in an isolated frame. Record evidence instead of simply ticking boxes.

const form = document.querySelector("[data-plan-form]");
const list = document.querySelector("[data-plan-list]");
const status = document.querySelector("[data-status]");
let tasks = [];
let filter = "all";

// 1. Load and validate stored tasks.
// 2. Render visible tasks with textContent.
// 3. Add, complete, remove, and filter tasks.
// 4. Save after every state change.
// 5. Report useful empty, success, and failure states.

Press Run to execute your code.

This workspace saves your evidence but does not automatically certify project quality. Test with keyboard-only input, invalid stored data, empty lists, and a narrow viewport.