Track Your Daily Habits & Build Streaks Track daily habits with visual streak counting, completion tracking, and progress visualization.

The Habit Tracker uses the React library to manage its state and render the user interface. It employs the useState hook to store an array of habit objects, each containing a unique id, name, and completion log as an array of YYYY-MM-DD strings. The addHabit function utilizes the useCallback hook to memoize the function and prevent unnecessary re-renders. When adding a new habit, it checks if the input is not empty and then updates the habits state by appending a new habit object with a unique id generated using Date.now().toString().

The deleteHabit function filters out the habit object with the matching id from the habits array. The toggleDay function iterates through the habits array to find the habit object with the matching id, and then toggles the completion status of the specified date by either adding or removing it from the completedDates array. The getLast7Days function generates an array of YYYY-MM-DD strings representing the last 7 days by subtracting each day's date from the current date using a for loop.

The getStreak function calculates the current streak by iterating backward from today and counting consecutive days that are present in the habit's completion log. It uses a for loop to decrement the date and checks if the resulting YYYY-MM-DD string is included in the completedDates array. The getCompletionRate function calculates the completion rate over the last 7 days by filtering the days array to include only dates that are present in the habit's completion log, then dividing the length of the filtered array by 7 and multiplying by 100.

The Habit Tracker also uses JavaScript's built-in Date object and its methods, such as toISOString() and toLocaleDateString(), to handle date-related operations. The gridTemplateColumns CSS property is used to define a grid layout for displaying the habit names and their corresponding completion status over the last 7 days. The style attribute is used to dynamically set the width of the progress bar based on the calculated completion rate.