HabitFlow

Stay consistent, stay disciplined.

 

 Concepts & Visuals

1. The Streak Logic

The most complex part of a habit tracker is the streak calculation. It’s not just about the total number of checkmarks; it’s about continuity.

• If you checked it today, the algorithm looks at yesterday.

• If you haven't checked it today yet, it looks at yesterday to see if the streak is still "active" before resetting it to zero.

2. Local Storage Implementation

To ensure data isn't lost, we use: localStorage.setItem('habits', JSON.stringify(habits)) This turns your list of habits into a text string and stores it in the browser's memory. When the page reloads, we "thaw" that string back into a JavaScript object using JSON.parse.

3. Responsive UI

The CSS uses a Card-based layout. This is ideal for mobile devices because the habits appear as large, easy-to-tap targets. The check-btn grows slightly on hover and changes color to give the user immediate positive feedback upon completion.