Eco-Friendly Habit Tracker

My project is a simple web app that helps users build eco-friendly habits and track their progress. Users can add eco-friendly habits, earn points for each action, and see their cumulative score grow.

Comment

Inspiration

The Eco-Friendly Habit Tracker was inspired by my desire to make sustainability engaging. I wanted to gamify daily eco-friendly actions so that small steps could feel meaningful.

I was motivated by seeing how consistent habits can compound into large impact over time, similar to the math concept of exponential growth:
[ impact = (1 + r)^{n} ] where ( r ) is the rate of improvement and ( n ) is the number of days.

What it does

The Eco-Friendly Habit Tracker is a gamified web app that encourages users to build consistent eco-friendly habits. Users set a daily eco-goal (in points) and earn +10 points for every eco-action they complete. A dynamic progress bar shows how close they are to their goal and resets automatically each day. When the user meets their goal, they’re rewarded with confetti and a congratulatory message.

The app also lets users:

  • Add, edit, and delete habits
  • Sort habits alphabetically or by date
  • Clear all habits in one click
  • Track daily progress that persists even after refreshing

How I built it

  • Frontend: HTML and CSS for structure, layout, and styling
  • Logic: Vanilla JavaScript for DOM manipulation, event handling, and progress tracking
  • Data persistence: Browser localStorage to save habits, daily goals, and progress
  • Version control: GitHub for project management

Challenges I ran into

  • Daily reset logic: We had to figure out how to detect when a new day starts so that the progress bar resets. This helped me learn more specific niche cases in Javascript through trial and error.
  • Balancing features and time: I initially wanted to build AI recommendations and analytics, but prioritized building a solid foundational app.
  • UI/UX: Making the app visually clean and mobile-friendly took numerous tweaks to the CSS styling and HTML code

Accomplishments that I'm proud of

  • Built a complete, working app from scratch with no external frameworks
  • Implemented a progress bar and daily reset system that helps make my project more interactive and engaging
  • Refreshed my overall front-end knowledge to bring a solid beginner project for my first hackathon

What I learned

  • How to use localStorage effectively for saving user data
  • Implementing daily reset logic using dates
  • UI/UX design principles for responsive layouts and intuitive interfaces
  • How to prioritize function over features to provide a solid project

What's next for Eco-Friendly Habit Tracker

I have some big plans in the making:

  • 🌍 Eco-Impact Calculator: Show CO₂ saved, water saved, and other metrics
  • 🏆 Badges & Streak Tracking: Earn rewards for consistent eco-actions
  • 🌐 Leaderboards: Compete with friends or the community
  • 📊 Analytics Dashboard: Weekly/monthly progress charts (Chart.js)
  • 🤖 AI Recommendations: Suggest eco-actions based on user data & local conditions
Share this project:

Updates