HabitFlow - Health & Productivity Dashboard

Live Demo Link: https://uttkarsh-habitflow.netlify.app

A client-side web application designed to help users track daily habits, manage tasks, and monitor key health metrics using a beautiful, data-driven interface.

• Note: You will need to take a screenshot of your app, upload it to a site like Imgur, and add the link to this README.

✨ Core Features

The application is a single-page dashboard comprised of several interconnected components:

• Habit Tracking:

  • Add habits from pre-defined suggestions or create your own custom habits.
  • A dynamic progress bar provides immediate visual feedback on daily completion.
  • Mark habits as complete with a satisfying "pop" animation for a rewarding user experience.

• To-Do List:

  • A simple and effective to-do list to manage and check off daily tasks.
  • Keeps daily tasks separate from long-term habits for better organization.

• Health & Analytics Dashboard:

  • BMI Calculator: Input weight and height to calculate BMI and receive personalized health advice.
  • Weekly Consistency Chart: A bar chart that visualizes the number of habits completed each day over the past week.
  • Habit Breakdown Chart: A doughnut chart that shows the total completion count for each habit, helping users identify areas of strength.

🛠️ Tech Stack

This project was built entirely on the frontend using modern web technologies, with no backend required.

• Core: HTML5, CSS3, JavaScript (ES6+)
• Styling: Tailwind CSS for a utility-first, responsive design framework.
• Data Visualization: Chart.js for creating beautiful and interactive charts.
• Data Persistence: Browser's localStorage API to store all user data persistently on the client-side.

🚀 How to Run Locally

Since this is a self-contained application, running it locally is very simple:

1. Clone the repository:

   git clone (https://github.com/UnbeatenAnalytics/HabitFlow-Health-tracker.git)
   

2. Navigate to the directory:

   cd HabitFlow-Health-tracker
   

3. Open the file:
   • Open the index.html (or habit-tracker.html) file directly in your web browser.