Build a habit tracker from data model to daily progress
Turn an array of habit objects into a working browser app. You’ll render each habit, connect buttons and a form to application state, validate new entries, update streaks safely, and derive a useful daily progress message from the latest data.
Applied skills
ArraysObjectsEventsFormsList rendering
Before you start
Create and update arrays of JavaScript objects
Write functions with parameters, return values, and conditionals
Use DOM selectors, event listeners, and form submit events
What you’ll build and practise
Model habits as structured JavaScript data
Render habit cards and completion state from an array
Toggle progress and update streaks without state drift
Validate form input and create new habit records
Calculate and display daily completion progress
01
Habit Tracker JavaScript project brief
Read
In this project, you will build a tiny browser app for tracking today's habit check-ins. The app starts with a few habit objects, renders them into the page, lets the user mark habits done, creates new habit records from a form, validates empty submissions, and updates a progress message.
02
Model Habit Data in Habit Tracker
Code
Before the page can render habits, the app needs a small set of starter data. Each habit should be one object, and the full tracker should be an array of those objects.
03
Render Habit Names in Habit Tracker
Code
Now the page needs to show the habit names. No streak text, classes, ids, or buttons yet. This stage is only about the basic render loop: clear the list, loop over the data, create list items, and append them.
04
Add Habit Card Details in Habit Tracker
Code
The list already renders one item per habit. Now upgrade each item into a habit card. This stage still has no buttons. It only adds the details that later stages need.
05
Render Status Buttons in Habit Tracker
Code
The app now has habit cards with names, ids, and streaks. Add a button to each card and make completed cards look different.
06
Find the Matching Habit in Habit Tracker
Code
Before a button can update a habit, the app needs a reliable way to find the habit object that belongs to that button.
07
Toggle Completion in Habit Tracker
Code
Now the app can connect a click to a habit object. In this stage, clicking a toggle button should flip the habit's completedToday value and re-render the list.
08
Update Streaks Safely in Habit Tracker
Code
The completion button works. Now add the habit-tracker rule: marking a habit done increases the streak by 1, and undoing a habit decreases the streak by 1 without going below 0.
09
Create Habit Records in Habit Tracker
Code
Before the form changes the app, create a helper for one new habit record. This keeps the object shape in one place.
10
Validate the Form in Habit Tracker
Code
The form should not add blank habits. In this stage, only handle the submit event and validation message. Adding a valid habit comes next.
11
Submit New Habits in Habit Tracker
Code
The form can reject blank names now. Finish the valid path: create one habit, add it to the source-of-truth array, and render again.
12
Count Completed Habits in Habit Tracker
Code
Before updating the summary text, write a small helper that counts completed habits. This keeps the counting rule separate from DOM updates.
13
Show Daily Progress in Habit Tracker
Code
The page has two text areas above the form: #habit-summary and #habit-message. These should not be separate state. They should be calculated from the current habits array.
14
Habit Tracker Review in Habit Tracker
Check
Check the main ideas behind the habit tracker project.
Ready to build the project?
Unlock the interactive stages, run the tests, and keep your code saved as you work through the full project.