CLIMATE ACTION - GOAL 13

(Climate Action): Act on Climate. Secure Our Future 🌏 Climate Action Now Protect Our Planet. Take Climate Action. It's Time for Climate Action. Our Climate, Our Responsibility.

Comment

Inspiration

Beyond the alarming headlines, several key inspirations fueled our journey:

  • The Urgency of the IPCC (intergovernmental panel of climate change) Reports: The stark scientific consensus on the human impact on climate change and the limited window for action resonated deeply. I felt a moral imperative to use our skills to contribute to solutions.
  • The Power of Individual Action: While systemic change is crucial, we believed that empowering individuals with knowledge and tools to understand and reduce their carbon footprint could create a significant collective impact.
  • The Potential of Technology for Good: As computer science enthusiasts, I am excited by the prospect of leveraging technology – data analysis, mobile applications, and user-centric design – to promote sustainable behaviour.
  • Local Community Concerns: Witnessing the direct impact of climate change on our city, from waterlogging to heatwaves, motivated us to create a tool that could be relevant and beneficial to our local community.

What it does

🌱 Welcome to EcoRun – Track, Act, and Impact! 🌍

EcoRun is your all-in-one eco lifestyle companion. It helps you measure your environmental impact, earn rewards, and build sustainable habits—all while having fun!

✨ What You Can Do:

  • 🚶‍♀️ Track your activity – Calculate CO₂ savings and calories burned from walking, biking, and more.
  • 📊 Visualize your impact – See your progress with dynamic charts and eco stats.
  • 🏅 Unlock badges – Hit milestones and earn badges for every green choice you make.
  • 🔥 Build streaks – Stay consistent and track your daily eco streak.
  • 🎯 Take weekly challenges – Crush goals like walking 20km and earn exclusive badges.
  • 🧑‍🎨 Customize your avatar – Pick your eco alter-ego from runners to heroes.
  • 💬 Join the community – Share eco tips, thoughts, and motivation with others.
  • 📅 Stay eco-aware – Get notified about global environmental awareness days.
  • 🌗 Toggle dark mode – Browse in light or dark with a beautifully themed interface.
  • 📤 Share your journey – Post your achievements and inspire friends to go green.

ADDITIONALLY ADDED A SMALL 3 QUESTION ECO-QUIZ TO KEEP THE USER'S ENTERTAINED

Start your journey to a greener planet—one step at a time with EcoRun. 🌱 Small steps, big change.

How we built it -

The EcoRun website is designed to promote eco-friendly habits by allowing users to track their carbon footprint and engage with a community of like-minded individuals. The site features a user-friendly form where users can input their name, weight, distance walked, and time taken, as well as select their mode of transportation to calculate their environmental impact. A dynamic leaderboard and progress bar visually display user achievements, while an avatar section provides a personalised and motivational touch.

The weekly challenge section encourages users to meet specific goals, such as walking 20km, to earn badges. Additionally, the site includes an eco-news section to keep users informed about the latest environmental updates, a calendar for eco-events, and a community posts section for sharing thoughts and tips. The responsive design ensures accessibility across devices, and the footer provides quick links and social media connections to enhance user engagement. The entire project is built with HTML, CSS, and JavaScript, leveraging Chart.js for data visualisation and incorporating interactive elements like dark mode and toast notifications for a modern, engaging user experience.

Challenges we ran into -

🚧 Challenges We Ran Into

  1. 🌐 Ensuring Accurate CO₂ Calculations Finding reliable emission rates for different transport modes and implementing precise calculations for varied user inputs required extensive research and testing.

  2. 📊 Chart.js Integration & Responsiveness Embedding Chart.js for live impact visualization while keeping charts responsive across devices took fine-tuning and layout adjustments.

  3. 🌗 Dark Mode Persistence Implementing a dark mode toggle that remembers user preference across sessions with localStorage introduced complexity in theme management and CSS overrides.

  4. 🏅 Badge Logic and Threshold Handling Designing a reward system based on CO₂ saved required careful condition checks and dynamic DOM updates to avoid logic conflicts.

  5. 🔥 Streak Tracking Across Days Creating a reliable streak tracker involved comparing current and previous dates, managing local storage correctly, and handling edge cases like missed days.

  6. 🧑 Avatar Preview System Dynamically loading avatar GIFs based on selection while preventing performance issues or broken links posed design and loading challenges.

  7. 📱 Mobile Responsiveness Maintaining layout consistency and interactivity across various screen sizes—especially for forms, charts, and community posts—was time-consuming.

  8. 🧩 UI Overlap and Element Conflicts With many floating elements (buttons, popups, toasts), ensuring they didn’t overlap or interfere with user input required careful z-index management.

  9. 🔄 Data Persistence Without a Backend Storing streaks, avatar preferences, and form interactions locally using only browser storage had limits and required fallbacks for privacy and reliability.

  10. 🧪 Testing Multiple Interactive Features With dark mode, badges, leaderboard, posts, and more, testing all features together to prevent bugs and UI glitches was a major QA effort.

Also Being a CS Student studying in University (currently) still learning it was a great way to showcase my web-programming skills which i just learned and made me realise how difficult it can be to make a good website definitely won't be stopping here will try to make this website a real-life path breaker over the coming years by gaining exposure and doing research 🔬😁

Accomplishments that we're proud of

🌟 What We’re Super Proud Of

  1. 🌍 Helping You Track Your Eco Impact We built a fun way to see how your daily choices—like walking instead of driving—help the planet by saving CO₂ and burning calories too!

  2. 📊 Bringing Your Progress to Life Our live charts turn your eco-savings into beautiful visuals, so you can see your good habits in action.

  3. 🏅 Rewarding You with Achievements Earn cool badges as you go green—because every step counts and you deserve a little celebration! 🎉

  4. 🔥 Keeping Your Streaks Going Strong Whether it’s day 1 or day 10, we track your eco streaks and cheer you on for staying consistent!

  5. 🧑‍🎨 Letting You Be *You* Choose an avatar that matches your style—runner, hiker, eco hero, and more. It's your journey, your way.

  6. 🎯 Weekly Eco Goals That Motivate We added fun challenges like walking 20km in a week. It’s all about turning good habits into awesome wins.

  7. 📅 Never Missing an Eco Celebration From Earth Day to Forest Day, our eco-calendar keeps you in the loop on the world’s most important green moments.

  8. 💬 Building a Green Community Wall You can share your thoughts, tips, or just a little eco-love with others who care about the planet too.

  9. 📱 Making It Look Great Everywhere Whether you're on your phone or computer, EcoRun looks fresh, clean, and smooth thanks to our responsive design.

  10. 🚀 Doing It All with Just the Frontend We built all of this using only HTML, CSS, and JavaScript—no backend, no databases—just pure browser magic! ✨

What we learned

📚 What We Learned

  1. Real-world math matters – Converting travel data into CO₂ impact taught us how small numbers add up to big change.

  2. User experience is everything – Friendly design, streaks, and badges really help keep users engaged and motivated.

  3. Frontend can do a lot – With just HTML, CSS, and JavaScript, we created a full-featured, interactive app—no backend needed!

  4. Designing for all devices matters – Making EcoRun responsive taught us how to think mobile-first from the start.

  5. Sustainability can be fun – Combining eco tips with gamification helped us make learning about the environment more enjoyable!

What's next for CLIMATE ACTION - GOAL 13

🌍 What’s Next for Climate Action (Goal 13)

  1. 🌱 Expand EcoRun with More Activities Include biking, recycling habits, energy use, and food choices to give users a fuller view of their climate impact.

  2. 📈 Track Long-Term Progress Add user dashboards to show weekly/monthly trends in CO₂ savings, helping users see their lasting contributions.

  3. 🌐 Build a Global Leaderboard Let users see how they rank globally or by region to foster a sense of collective effort and friendly competition.

  4. 📲 Launch EcoRun as a Mobile App Create a cross-platform app version so people can track and act on-the-go, anytime, anywhere.

  5. 🤝 Collaborate with Schools / Universities & NGOs Partner with environmental educators or organizations to use EcoRun as a learning tool in classrooms and communities.

  6. 🔄 Encourage Real-World Eco Pledges Add a feature where users commit to personal eco-goals—like zero-plastic weeks or public transport days—and share them.

  7. 📣 Raise Awareness Through Stories Let users share their climate action journeys and feature them to inspire others and build an empowered green community.

At last want to say that it was great pleasure doing such an amazing project for you guys its always been my dream to give some of my ideas to the professional world being a student would love to hear many many suggestions from your side to make it a better website/app

Built With

Share this project:

Updates