🎯 Habits-Tracker

An offline-first productivity and habit tracking application built with vanilla JavaScript, HTML, and CSS. Track your daily habits, monitor progress, and build better routines without needing an internet connection.

✨ Features

• ✅ Offline First: Works completely offline - no internet required
• 📊 Progress Tracking: Visual progress bars and statistics for your habits
• 🎨 Beautiful UI: Modern, responsive design with smooth animations
• 💾 Local Storage: All data saved locally in your browser
• ⚡ Fast & Lightweight: No dependencies, pure vanilla JavaScript
• 🌙 Dark Mode: Eye-friendly dark theme support
• 📱 Responsive Design: Works on desktop, tablet, and mobile devices
• 🎯 Daily Reminders: Track habits on a daily basis with completion status
• 📈 Statistics: View your habit completion rates and trends
• 🔄 Habit Management: Add, edit, delete, and organize your habits easily

🚀 Quick Start

1. Clone the Repository

   git clone https://github.com/SnakeEye-sudo/Habits-Tracker.git
   cd Habits-Tracker

2. Open in Browser

   • Simply open index.html in your web browser
   • No server setup required!

   # On Linux/Mac
   open index.html
   
   # On Windows
   start index.html

3. Start Tracking

   • Add your habits
   • Mark them as complete each day
   • Watch your progress grow!

📁 Project Structure

Habits-Tracker/
├── index.html          # Main HTML file
├── css/
│   └── style.css       # All styles and animations
├── js/
│   └── app.js          # Core application logic
├── README.md           # This file
└── LICENSE             # MIT License

🎮 How to Use

Adding a Habit

1. Click on "Add New Habit"
2. Enter your habit name (e.g., "Read for 30 minutes", "Exercise")
3. Choose a category if desired
4. Click "Add" to create the habit

Tracking Your Habits

1. Check off the habit when you complete it
2. Watch the progress bar update in real-time
3. Your streaks and statistics update automatically

Managing Habits

• Edit: Click the edit button to modify habit details
• Delete: Remove habits you no longer want to track
• View Stats: See detailed completion rates and trends

💡 Technical Stack

• Frontend: HTML5, CSS3, Vanilla JavaScript (ES6+)
• Storage: LocalStorage API
• No External Dependencies: Pure client-side application

🎨 UI/UX Highlights

• Smooth animations and transitions
• Intuitive user interface
• Color-coded habit categories
• Real-time progress updates
• Visual feedback for user actions
• Mobile-first responsive design

📊 Features in Detail

Daily Tracking

• Mark habits complete/incomplete each day
• Automatic date tracking
• Visual completion status

Progress Analytics

• Completion rates by week/month
• Habit streaks
• Overall productivity stats
• Visual charts and graphs

Data Persistence

• All data stored locally in browser
• No account required
• Data persists across sessions
• Export/Import functionality (coming soon)

🔒 Privacy & Data

• ✅ No server uploads
• ✅ No tracking
• ✅ No analytics
• ✅ No data sharing
• ✅ 100% local data storage

Your habits are YOUR business. We don't collect, store, or analyze your data.

🛠️ Development

Local Development Setup

1. Clone the repository
2. Make your changes
3. Test in your browser
4. Create a pull request

Browser Support

• Chrome/Edge 60+
• Firefox 55+
• Safari 12+
• Opera 47+

📱 Responsive Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

🐛 Known Issues & Future Improvements

Coming Soon

Version 2.0 Features (In Progress)

• Export habits to CSV
• Import habits from file
• Habit templates
• Custom color themes (5 presets: Light, Dark, Ocean, Sunset, Forest)
• Habit notes and journal
• Backup and restore
• Multiple device sync (cloud backup)
• PWA support (installable app - manifest.json configured)

🤝 Contributing

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

How to Contribute

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

Code Style

• Use meaningful variable names
• Add comments for complex logic
• Follow existing code patterns
• Test your changes in different browsers

📝 License

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

👨‍💻 Author

SnakeEye-sudo - Initial work - GitHub Profile

🙏 Acknowledgments

• Inspired by popular habit tracking apps
• Built with vanilla JavaScript (no frameworks)
• Community feedback and suggestions

📞 Support

If you have any questions or suggestions, please:

• Open an Issue
• Check existing Discussions
• Email or contact through GitHub

🎯 Roadmap

Version 2.0

• Cloud synchronization
• Mobile app (React Native)
• Social features (share goals)
• AI-powered habit recommendations

Version 1.5

• Advanced analytics
• Habit reminders
• Custom themes
• Data export options

---

Happy Habit Tracking! 🚀

Made with ❤️ by SnakeEye-sudo

⬆ back to top