Skip to project content
BrounStack
PROJECT 02 · JAVASCRIPT

Build an interactive task app.

Turn DOM basics into a useful mini app. Add tasks, mark them complete and remove them while practicing events, arrays and UI updates.

Level: Beginner+ Time: 60–90 min Focus: DOM + Events
Open in Playground → Review JavaScript

What you will build

A small but real task manager that responds instantly to the user and keeps the UI synchronized with JavaScript state.

  • Add a task from an input form.
  • Mark tasks complete with a checkbox.
  • Delete individual tasks.
  • Render task count and empty state dynamically.

Build it step by step

Focus on understanding the data flow: input → state → render → event.

Build the UICreate the input form, task list and task counter.
Create task stateStore tasks in an array of objects with id, text and done values.
Render from stateGenerate the task list every time the state changes.
Add interactionsHandle submit, checkbox changes and delete button clicks.
Starter projectHTML + CSS + JavaScript in one file
\n