Build a Habit Tracker

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.

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.

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.

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.

The app now has habit cards with names, ids, and streaks. Add a button to each card and make completed cards look different.

Before a button can update a habit, the app needs a reliable way to find the habit object that belongs to that button.

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.

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.

Before the form changes the app, create a helper for one new habit record. This keeps the object shape in one place.

The form should not add blank habits. In this stage, only handle the submit event and validation message. Adding a valid habit comes next.

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.

Before updating the summary text, write a small helper that counts completed habits. This keeps the counting rule separate from DOM updates.

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.

Check the main ideas behind the habit tracker project.