JavaScript capstone project

Guest work stays on this device. Sign in to save across devices.

FINAL PROJECT · SAVED WORKSPACE

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.

Your implementation plan

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.

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.

Self-review evidence

1. The form validates and normalizes input before changing application state.2. Rendering is derived from state and uses textContent for learner-provided text.3. Event handling supports adding, completing, removing, and filtering tasks with a keyboard.4. Storage is parsed defensively, validated, and updated whenever state changes.5. Loading, empty, success, and failure states are visible and announced accessibly.

Loading saved work…

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.

Review the cumulative assessment