HabitFlow

• 

  screenshot

• 

  screenshot

• 

  screenshot

HabitFlow is a minimalist habit tracker I built with HTML, CSS, and vanilla JavaScript that stores all data locally using localStorage API, requiring no backend or internet connection. What inspired me was my own struggle as a student with procrastination and inconsistent study habits - I needed a simple tool with visual progress tracking that works offline. I learned how to use localStorage with JSON.stringify and JSON.parse for data persistence, dynamic DOM manipulation, CSS Flexbox and media queries for responsive design, event handling, and calculating progress percentage using the formula P = (C/T) * 100% where C is completed habits and T is total habits. I built it by creating core functions (addHabit, deleteHabit, toggleHabit), adding localStorage persistence, polishing UI with gradient backgrounds and progress bar animations, and implementing confirmation dialogs, empty state messages, and Enter key support. The main challenges I faced were: data disappearing after page refresh (solved with localStorage), progress bar not updating in real-time (solved by calling updateStats inside renderHabits), empty list looking broken (solved with conditional rendering), accidental deletions (solved with confirm dialogs), and mobile responsiveness (solved with CSS media queries). The result is a fully functional habit tracker that saves progress automatically, works offline, and provides visual motivation through a dynamic progress bar.

Built With

• css3
• git
• github
• html5
• javascript