Clean The Litter Scatter!

We developed "Clean the Litter Scatter!" to educate individuals about the harmful effects of various types of litter and to promote proper disposal practices.

Comment

Inspiration

We were inspired to develop this website because of the critical litter problem in this world. It's estimated that 20 million metric tons of plastic litter end up in the environment yearly(IUCN). We believe this is because of a lack of awareness of the huge problems caused by littering. People often don't try to learn about this issue because it may seem intimidating, so we have developed a website to educate anyone with a simple game.

What it does

This game scatters a few types of litter on the ground for the user to clean up, by disposing the litter into the correct bins. Before being able to dispose of the litter, they need to learn about it first. Once all litter is cleaned up, they get a congratulations message.

How we built it

We built this website with JavaScript, CSS, and HTML. We started coding the HTML framework, by adding images and creating the canvas. Then we used a little bit of CSS for styling changes. The rest of the website was developed with JavaScript Canvas, where we drew the litter onto the website, and added the bin images, dialogue, and other text.

Challenges we ran into

Throughout the process, we ran through many unexpected problems in Javascript. In one case, our litter-creating system did not work well, so we had to change it but ultimately made our algorithms more efficient. Many small bugs took us much longer than expected, for example, JavaScript is case-sensitive, and we didn't use camel case for naming all objects, so we ran into some small naming errors.

Accomplishments that we're proud of

We are extremely proud of finishing this website while collaborating. We are extremely happy to be able to submit it fully polished. Environmental issues are something we both care about deeply, so being able to create a website that educates others on this topic is a huge accomplishment.

What we learned

During the process of creating this website, we learned many techniques to create more efficient and shorter algorithms. We also learned how to be able to code together on a file at the same time, which is extremely helpful for future projects. Overall this hackathon has allowed for growth not just in our coding skills, but also in problem-solving and teamwork abilities.

What's next for Clean The Litter Scatter!

Clean the Litter Scatter! plans to expand our website by adding more trash, and more in-depth education. Our goal is to allow this website to be used by fellow students who are interested in combatting the littering crisis.

Built With

Share this project:

Updates