GitHub - anshulmittal712/habit-tracker: A basic in-browser habit tracking application featuring a wheel-based interface to help you build and maintain daily, weekly, and monthly habits.

2 min read Original article ↗

Habit Tracker Wheel 🎯

A visually appealing habit tracking application featuring a unique wheel-based interface to help you build and maintain daily, weekly, and monthly habits.

Demo Screenshot - Add one later

Features ✨

  • Visual Habit Wheel: Track daily habits with an intuitive circular interface
  • Multiple Habit Types: Support for daily, weekly, and monthly habits
  • Progress Tracking: Visual progress bars and completion percentages
  • Data Management:
    • Local storage for persistent data
    • Import/Export functionality via CSV
  • Responsive Design: Works on both desktop and mobile devices
  • Monthly Navigation: Easy switching between different months
  • Color-coded Habits: Visual distinction between different habits

Getting Started 🌟

  1. Clone the repository:
git clone https://github.com/anshulmittal712/habit-tracker.git
  1. Open index.html in your browser

That's it! No build process or dependencies required.

Usage 📝

  1. Select a Month: Use the month picker at the top to select your tracking period
  2. Add Habits:
    • Enter habit names in the respective sections (Daily/Weekly/Monthly)
    • Click the '+' button to add them
  3. Track Progress:
    • Daily habits: Click segments in the wheel
    • Weekly habits: Click week boxes (W1-W5)
    • Monthly habits: Use the checkbox
  4. View Progress: Check the summary section for completion rates
  5. Data Management:
    • Export: Click 'Export CSV' to save your data
    • Import: Click 'Import CSV' to restore previous data

Contributing 🤝

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License 📄

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments 🙏

  • Built with vanilla JavaScript, HTML, and CSS
  • Uses SVG for the wheel visualization