There are so many little things that one can do to help the environment. Almost everyone is already aware of how they can be more sustainable and know that being green is important for the future of our planet. However, being actually aware of how green you are everyday can be difficult. How often have you checked daily whether you were composted food waste, for example? It can be hard to remember to be sustainable everyday, but having big impacts can start with little tasks. We wanted to create this website to motivate and inspire people to be more sustainable, and hopefully change habits. Everyone’s actions count! If you want to implement sustainable lifestyle changes, EcoBuds will keep you accountable and motivated. The first (and for now, only) EcoBud on the site is a forest owlet. This is a nod to AthenaHacks’ owl mascot, but we also selected this animal because it is an endangered species threatened by human activity.

What it does

We’ve designed a simple but fun website that tracks whether you’ve done eco-friendly tasks that can be done everyday, like abstaining from eating meat or unplugging devices. A simple daily checklist keeps you accountable and lets you quantify how sustainable you are through a virtual forest owlet pet, compels improvement, and slowly changing daily habits to be more environmentally sustainable.

How we built it

We created a website using HTML5 and PHP where users can easily understand how to use the site and interact with the website. To customize the UI, we used HTML, Javascript and CSS. In HTML, we were able to assign values to the number of checked boxes. Javascript allowed us to add up the value of the checkboxes, change the value of the progress bar and change our images based on the boxes checked. We connected the checkboxes in the form to the progress bar and PHP allowed us to save the user’s form input.

Challenges we ran into

As first time hackers and inexperienced coders, we faced many challenges. We brainstormed a lot of ideas, but faced limitations in regards to how to implement them as we had only basic HTML knowledge. Being able to store form data from the website was one main trouble that we faced. We were able to solve this by picking up PHP throughout the 24 hours. Maintaining the layout of the website while creating different elements to the website was a challenge.

Accomplishments that we're proud of

We’re proud of what we were able to accomplish this weekend. We were all worried about going into a hackathon with very little experience as all of our members are not solely computer science majors, ranging from chemical engineering to environmental studies, to art and CS. Despite this, we were still able to create a website from scratch and troubleshoot errors effectively. We created a website that works and we’re proud of that!

What we learned

We learned how to add Javascript to an HTML file, allowing us to change the value of our progress bar and change our images. All of us gained more experience in web development by becoming familiar with new languages like CSS and Javascript. One of our members also learned how to use PHP, despite no prior experience, to save web form data. Through this, we created an interactive website that allows users to visually see the impact of their actions.

What's next for EcoBuds

We would like to expand on EcoBuds to make the website even more interactive by including features that allow users to save their progress and to track their sustainability progress over time through a login system. An additional feature we hope to implement in the future is EcoBud animal customization through a virtual currency system in which a certain number of sustainable acts would allow users to purchase different backgrounds and clothes for their EcoBud. We also want to expand the number of pets you can have, adding more different endangered animals as well as descriptions of them to increase awareness of animals who are affected by human activity. Users can then customize which animal they want to interact with, as well learn more about threatened animals. We would also like to rewrite our PHP code in Javascript so that we can implement this as a public website instead of hosting the site locally.

Share this project: