This is a submission for Weekend Challenge: Earth Day Edition
What I Built
I built Eco AI Earth Tracker 🌍🤖 — a gamified web application designed to encourage eco-friendly habits in a fun and interactive way.
Instead of just reading about sustainability, users actively participate by completing eco actions like recycling, saving water, and planting trees 🌱
Each action increases their score and updates:
• A dynamic Earth health system (from “weak” to “thriving”) 🌍
• A badge progression system 🏆
• A simple AI-style Earth Advisor chatbot that gives eco tips 🤖
• A client-side leaderboard that ranks players based on their eco actions
The goal of this project was to make environmental awareness more engaging, visual, and interactive.
Demo
Live Demo: click here
Code
GitHub Repository: https://github.com/mcoaiorg/eco-ai-tracker
Tech Stack
• HTML – structure
• CSS – responsive UI and styling
• JavaScript – game logic, chatbot, interactions
• LocalStorage – saving scores and leaderboard data locally
• Canvas Confetti – celebration effects 🎉
How I Built It
I built this project using a fully frontend approach with HTML, CSS, and JavaScript.
The core idea is a feedback loop system:
User actions → Points → Visual feedback → Progression
Key features include:
• A scoring system that tracks eco-friendly actions in real time
• A dynamic Earth health bar that visually reflects user impact 🌍
• A rule-based chatbot that responds to sustainability-related queries 🤖
• A client-side leaderboard system using LocalStorage to simulate competition 🏆
• UI enhancements like confetti animations and sound feedback for engagement
The design is fully responsive and works smoothly across mobile and desktop devices.
AI was used as a helper tool for small parts of logic and chatbot responses, while the overall structure, design, and integration were built manually.
Team Submissions
Solo project by: @mastercotutorials
Top comments (0)