TrashDash

TrashDash -> Turn trash into triumph! Sort waste, learn green facts, and test your eco-knowledge in a fast-paced, fun game.

Comment

TrashDash – Project Story

Inspiration -

We were inspired by the urgent need to raise awareness about proper waste management in a fun and engaging way. Most people know recycling is important, but very few understand how to actually sort waste correctly. We wanted to bridge this gap by combining gaming + learning, creating an interactive experience that makes waste sorting memorable and enjoyable.

What it does ?

TrashDash is a fast-paced, eco-themed waste sorting game built with vanilla HTML, CSS, and JavaScript. Players drag and drop falling waste items (plastic, paper, organic, e-waste) into the correct bins.

  • ✅ Real-time scoring system with increasing difficulty
  • ✅ Educational eco-facts shown after each round
  • ✅ Interactive Learn Section with tab-based eco-topics & animated fact cards
  • ✅ Quiz Tab with 5 randomized questions every time you reload, keeping the learning fresh
  • ✅ Fully responsive design that works across desktop, tablet, and mobile

How we built it ?

  • Frontend: Pure HTML5, CSS3, JavaScript with no frameworks – ensuring lightweight performance and offline functionality.
  • Animations: CSS @keyframes, transitions, and JavaScript-based event handling for smooth falling waste items and glowing bin effects.
  • Game Logic: requestAnimationFrame() for continuous animations, drag-and-drop mechanics with both mouse and touch events.
  • Facts & Quiz: Data stored in structured JavaScript arrays and randomized using Math.random().
  • Design: Eco-friendly color palette, gradient backgrounds, subtle shadows, and a custom logo for a professional finish.

Challenges we ran into -

  1. Balancing fun gameplay with educational value without making the game feel too heavy.
  2. Implementing smooth drag-and-drop mechanics that worked on both desktop and mobile touch devices.
  3. Designing an animated landing page that looked lively but didn’t hurt performance.
  4. Creating a randomized quiz system that doesn’t repeat questions often.
  5. Debugging tricky CSS transitions that clashed with gameplay animations.

Accomplishments that we're proud of -

  • Built a fully functional game without using any frameworks.
  • Designed a unique animated landing page that grabs attention instantly.
  • Developed a random quiz + fact system to keep players engaged beyond gameplay.
  • Ensured responsiveness across all devices, making TrashDash truly universal.
  • Most importantly, we made learning about recycling fun!

What we learned -

  • How to structure a full project with only vanilla HTML, CSS, and JS.
  • Advanced use of requestAnimationFrame() and custom event handling.
  • The importance of UI/UX design in keeping players engaged.
  • How to debug animation conflicts and optimize performance.
  • Team collaboration and feature prioritization for hackathon deadlines.

What's next for TrashDash -

  • Adding global leaderboard integration (Firebase / Supabase) so players can compete worldwide.
  • Expanding quiz questions and fact library with more categories.
  • Adding sound effects and background music, toggleable for accessibility.
  • Unlockable levels with new bin types (e.g., glass, hazardous waste).
  • Deploying on GitHub Pages / Netlify so anyone can play instantly.

TrashDash turns waste sorting into a fun, addictive experience — helping people learn, play, and make eco-friendly choices every day.

Built With

Share this project:

Updates