EcoTrack — A Habit Tracker for the Planet 🌍

This is a submission for Weekend Challenge: Earth Day Edition

What I Built

EcoTrack is a zero-dependency eco habit tracker that helps everyday people build and stick to planet-friendly habits — one small action at a time.

The idea is simple: most people want to live more sustainably but don't have a lightweight, friction-free way to stay accountable. EcoTrack makes it as easy as checking off a to-do list — but for the planet 🌍.

Key features:

• Daily one-tap habit check-in with per-habit streak tracking
• Progress ring showing today's completion at a glance
• 7-day weekly heatmap to visualize consistency
• Cumulative impact dashboard — CO₂ saved, plastic avoided, energy and water conserved
• Browser push notification reminders at your chosen time
• Add custom habits beyond the defaults
• Fully offline — all data stored in localStorage, no account needed

Default habits include: using a reusable bag, choosing public transport, eating plant-based meals, turning off unused lights, and carrying a reusable water bottle.

Demo

🔗 Live App: EcoTrack — Eco Habit Tracker

Code

🐙 GitHub Repository: github.com/makendrang/ecotrack

The entire app lives in a single index.html file — no build step, no dependencies, no framework. Clone it and open it directly in your browser.

ecotrack/
└── index.html   # Complete app — HTML + CSS + JS in one file
└── README.md

How I Built It

EcoTrack is built with pure vanilla HTML, CSS, and JavaScript — deliberately no frameworks or dependencies. The goal was to keep the app as lightweight and accessible as possible, something anyone could fork, modify, and host in minutes.

Technical highlights:

• localStorage powers all persistence — habits, daily logs, streaks, and reminder settings all survive page reloads with no backend
• Streak algorithm iterates backwards from today through the log to calculate per-habit and overall streaks
• Impact calculations map each habit to an environmental category (carbon, plastic, energy, water) and compute cumulative totals across all logged days
• Web Notifications API handles the reminder system — the app requests permission, then schedules a setTimeout to fire a browser notification at the user's chosen daily time
• CSS-only animations drive the progress ring (SVG stroke-dashoffset transition) and impact bar reveals — no JS animation libraries needed

How GitHub Copilot helped:

GitHub Copilot was instrumental in keeping the build moving over a tight weekend window. Specific wins:

• Generated the streak calculation logic from a plain English comment in seconds
• Autocompleted repetitive localStorage get/set patterns without me writing boilerplate
• Suggested the SVG stroke-dashoffset animation approach for the progress ring when I described what I wanted in a comment
• Wrote the Web Notifications API scheduling logic — I just described "fire a notification at a user-chosen time daily" and Copilot filled in the setTimeout + Notification constructor code
• Helped write the CSS dot-grid background texture and the radial gradient layering

What would have taken a full day of boilerplate and MDN lookups was compressed into a focused few hours, leaving more time to refine the UI and Earth Day theming.

Prize Categories

✅ Best Use of GitHub Copilot

GitHub Copilot wasn't just a convenience here — it was a core part of making this build possible within a weekend. From streak logic to notification scheduling to SVG animation, Copilot accelerated nearly every technical decision in the project. I used inline suggestions throughout the codebase and Copilot Chat to reason through the localStorage data model before writing a single line.

---