Bin Buddy | Devpost

Header / Front page!
Bin Buddy Map
Info
Bin Buddy Logo

Inspiration

The primary reason for littering is the difficulty locating nearby garbage cans. Because of this, around 40% of dog owners don’t clean up after their pet’s waste, and the percentage of litter is increasing astronomically each year. Not only does litter and dog waste stunt plant growth, but it also contains toxic substances that harm wildlife. Realising this, although there are many initiatives in our community, there is a lack of initiative helping individuals find trash cans. The same goes for Google Maps; there is no feature that marks the trash cans making it particularly challenging to find one, especially in unfamiliar areas.

Imagine this, it’s a beautiful Friday. The sun is beaming, the wind brings a nice breeze and the sky is the perfect shade of baby blue. However, as you make your way to school, you can’t help but notice the imperfections lying around. First of all, you come across an abandoned poop bag right in the middle of the sidewalk. Almost stepping on it, you manage to step to the side just in time. As you continue on, you notice multiple plastic bottles rolling around. Carried by the breeze, the bottles eventually make their way to a ditch on the side of the road, pilling up with many other bottles. At last, you make it to school, in the distance, you see a trash can. Walking up to dispose of the few bottles you were able to carry, the trash can is nearly empty. Like many others, our community is not clean. While many individuals and groups of people attempt to clean up the litter, there is always more. Inspired by our daily experiences, we decided to make a website to help combat the littering problem in our community, and hopefully one day, even more communities.

What it does

Bin Buddy displays the locations of local trash cans and dog waste disposals. Bin Buddy makes navigating trash bins significantly easier, especially in unfamiliar communities.

How we built it

We built it using HTML, CSS, Javascript and Figma. Starting off, we created the general design and aesthetic of the website using Figma. After finishing the design, we used it as a guideline for the website appearance and code. Using HTML, we built the foundation such as the various sections, headers, the text, and even importing the Google Mind Map url. As well, using Javascript, we were able to create a typewriter function. Finally, using CSS allowed us to style and create an aesthetically pleasing website including, the positioning, colours, and various images.

Challenges we ran into

Some challenges we ran into included marking the exact location of the trash cans on the Mindmap. Essentially, we took small walks around our neighbourhoods to find the closer trash cans, however, we weren’t able to do that with the further ones, thus we had to go off images we found. Finding the locations was quite time-consuming and difficult as many of the images didn’t have labels of the exact locations. Furthermore, Google Maps didn’t have the street view option available which made it harder for us to mark the local trash cans that were hidden within our neighbourhood.

Some additional challenges we ran into code-wise were the dozens of bugs encountered. For example, there were several formatting problems on the second page of the website. As well, it was difficult creating interactive buttons that scrolled when you pressed them, and the typewriter function kept on being laggy.

Lastly, we faced challenges in terms of communication. Since our group wasn’t together in person and many had conflicting schedules, we had to get creative on how we wanted to work together. This involved a lot of problem solving and figuring out how to divide our workload.

Accomplishments that we're proud of

We are proud that our map of trash cans is accurate to our community thus, our website is already functional and is serving its purpose. Additionally, we are proud of the final aesthetic of our website.

What we learned

During TurtleHacks, we learned and improved upon many skills. The biggest concept we learned was how to make a website. Not only did we learn how to design our website with multiple formats using HTML and CSS, we also learned how to code with Java. In general, the website was a learning experience with lots of trial and error.

What's next for Bin Buddy

In the future, we hope to further expand Bin Buddy by adding more trash cans, expanding the area we cover and adding images to further assist users! As well, we plan to turn Bin Buddy into an app, and use Google Maps API to find the shortest route for someone’s location to a trash bin.