The Habit Tracker comes to life thanks to JavaScript that works directly with specific parts of the page, making everything feel smooth and responsive for anyone using it.

Adding and Managing Habits
Input Field (habit-input): This is where you’ll type in the details of your new habit (like “Drink 8 glasses of water…”). There’s helpful placeholder text to show you what to enter, and the styling makes it stand out. Plus, you’ll get a subtle highlight when you click on it (that little ring effect).

Add Habit Button (add-habit-btn): When you click this button, it runs the addHabit() function in JavaScript. First, it checks that you’ve actually typed something. The button itself is designed to catch your eye and feel satisfying to press (with that blue color and slight zoom on hover).

Keyboard Support: The app is clever enough to notice when you press ‘Enter’ in the input field, too. This does exactly the same thing as clicking the button, which makes the whole process a bit faster.

Data Structure: Every new habit gets saved as a special object. It includes a unique ID (handled by habitIdCounter), the text you entered, a list of dates you’ve completed it, and the time you created it. This detailed setup makes it easy to keep tabs on your progress and calculate streaks.

Deleting Habits: Next to each habit you add is a delete button (which runs deleteHabit(habit.id)) featuring a trash can icon. Clicking it will remove that habit from your list and update the screen right away. Take charge of your daily routine with Toolota’s Habit Tracker.

Tracking Your Progress and Streaks

Marking Completion: The main way you interact with your habits is by using the “Mark Complete” button. When you click it, it triggers a function called toggleHabitToday(habit.id). This function is quite important because it checks if today’s date (which it gets using getToday()) is already in the habit’s list of completed dates.

• If the habit hasn’t been completed today, it adds today’s date to the list, and the button changes its text to “Completed Today” and turns green (using a bg-green-600 style).

• If the habit has already been marked as completed today, it removes today’s date from the list, and the button goes back to its original state.

•  

How Streaks Work: The calculateStreak(habit) function figures out how many days in a row you’ve been completing a particular 

Habit. It starts with today and then checks each previous day one by one to see if you completed the habit, giving you an up-to-the-minute count of your current streak.

Getting Feedback: When you perform actions like adding a new habit, marking one as complete, or deleting one, a subtle, animated notification (with the class notification-active) will pop up in the bottom right corner. This serves as immediate confirmation and a little positive reinforcement. The app is designed to let you easily see how you’ve been doing over the last 10 days.

Tracking Your Progress: Last 7 Days
The Mini Calendar on each Habit card shows a row that automatically updates to display the past week’s activity (last7Days). This visual snapshot is super helpful for seeing how consistent you’ve been recently.

Design Details:

Days you’ve checked off get a special “completed” style—think a cheerful green background with white text to celebrate your win.

The current day stands out with the “today” look—a noticeable blue border (border: 2px solid #3b82f6) so you always know where you are in the cycle.

When you mark a day complete, you’ll notice a nice little animation: the circle smoothly grows a bit (transform: scale(1.1)) over 0.3 seconds (transition: all 0.3s ease). It’s a small but satisfying visual reward for sticking to your Habit!

Real-Time Statistics

Check out the bottom part of the main card – it shows you three key stats that update automatically. These are super important for keeping an eye on how you’re doing overall. All the math behind these numbers is handled by the updateStats() function:

• Total Habits (total-habits): This is just the simple count of how many Habits you currently have set up (it checks the length of your habits list).

•  

• Completed Today (completed-today): This figure tells you how many Habits you’ve marked as done today. It counts only the habits where today’s date is listed in their completion dates.

•  

• Avg Streak (avg-streak): This one calculates the current streak for each Habit, adds all those streaks together, and then divides by the total number of Habits (if you have any Habits at all). It gives you a rounded number as the average. Keeping track of this average is a great way to stay motivated and keep those streaks going!

Data Persistence and Storage

Toolota Habit Tracker keeps all your data safe and sound using the browser’s built-in localStorage feature. This makes it a fast and secure way to track your personal Habits right in your browser.

• Loading: When you first open the tracker, the script automatically looks in localStorage to see if you already have any saved Habit data (habits) or a Habit ID counter (habitIdCounter). If it finds data, it loads it up. If not, it just starts fresh with empty lists and counters.

•  

• Saving: The saveHabits() function kicks in after every big action you take – like adding a new Habit, marking one as complete, or deleting one. It immediately saves the latest version of your Habits list and the updated ID counter back to localStorage. This means whenever you come back to Toolota’s Habit Tracker, all your progress will be right where you left it, instantly restored.