Climate change is becoming an increasingly pressing issue as carbon emissions, energy consumption, and depletion of natural resources all begin to rise due to a combination of increased global population, human activities, and inefficient usage of resources. This has resulted in numerous negative impacts, including, but not limited to, bleaching of coral reefs, extreme weather events, and melting ice caps, and studies indicate that this might only be the beginning; since the 19th century, the average temperature on Earth has increased by only one degree Celsius, yet that one degree led to a multitude of harmful effects. These effects are likely to be worsened as temperatures currently continue to rise rapidly such that temperatures might rise another one degree Celsius by 2030. However, just like how that single degree resulted in a multitude of effects, the act of a single person can contribute to helping stop the rise in temperature. Thus, Eco-Q aims to spread awareness and encourage environmental sustainability from everyone, with an extra focus on children to help foster sustainable habits at a young age. Together, we can all help slow and even reverse the increase in temperatures!

What it does

Users are able to navigate to different tabs on the website to learn about proper waste disposal and environmental sustainability. The Home page provides an overview of the current issue with improper waste disposal as well as steps to prevent being part of the problem. The Mario page provides a fun interactive game with users playing as the earth jumping over trash. The Sorting page provides a way to directly test the user’s knowledge about items that are recyclable, so the user can easily apply this knowledge to real life situations and easily recognize objects that are recyclable.

How we built it

We built it by utilizing html as the structure for our website to create different pages to group information and the games. This was used alongside css to ensure a friendly UX design by providing both an aesthetically pleasing interface as well as an intuitive interface. For the games, javascript and the p5.js library were also utilized to create animations and more interaction with the user.

Challenges we ran into

Initially, we had difficulties creating clear plans for the project and expectations for each member. While we had an idea of the project, we were unsure whether we wanted to approach creating the project with primarily html/css or javascript and who should be responsible for which aspects of the project. We solved this by identifying and weighing the advantages and disadvantages of html/css and javascript. For instance, javascript provides more flexibility with interactivity, making it perfect for games, whereas html provides better structure, making it perfect for providing easy-to-read information. We also solved this problem by consistently keeping each other updated on completed tasks and tasks that still needed to be completed. Another issue we had was with collaboration on Glitch. Edits to the code would result in the page refreshing, making it difficult for someone to debug and test what they were working on if someone was editing the code at the same time even if the code was on a different page/javascript file. Thus, each team member copied the main collaborative “skeleton” and would edit it on their own. This enabled team members to ensure full functionality of the code and upload it to the main collaborative project only when their subtask was working.

Accomplishments that we're proud of

The main strength of javascript is increasing interactivity between the user and the webpage, so we were proud that we were able to explore more of these capabilities in javascript by keeping track of different user events (whether the mouse/key was pressed, user actions like changing mouse positions) and utilizing them as conditionals to manipulate the logical flow of code. Some other miscellaneous accomplishments we were proud of include incorporating our own graphics (with a world character on the Mario game and a graphic representation of an unclean earth on the Home page), animating the world sprite to be moving, and randomizing which trash objects were displayed for the Mario and Sorting game.

What we learned

Most of the team members are new to hackathons, so this was an eye-opening experience to the power of teamwork and communication in a time-limited project. We learned how to best divy up tasks, constantly keeping each other updated on progress to ensure each task was able to be integrated into others’ code. As a result, we were able to solve new problems together, both technical and non-technical. Additionally, this experience helped bridge the gap between understanding coding languages and applying them to tangible applications, allowing us to strengthen our knowledge of coding from memorization to utilizing it as a tool. For instance, we learned how to thoroughly integrate javascript into html to create interactive websites when before, we thought of these two different languages as separate entities.

What's next for Eco-Q

Eco-Q currently focuses on educating kids on the importance of environmental sustainability and everyone doing their part to ensure the Earth stays clean for generations. This functionality can be enhanced by providing a checklist that can help streamline information and keep the user updated on their progress as they check off tasks they have completed. From there, Eco-Q’s next step is to provide more resources for people to begin doing their part, such as utilizing geolocation to help provide suggestions to users about sustainable/local companies and recycling centers nearby or connecting the website to hardware such as Alexa and Google Home to control utilities (like turning off lights) to reduce energy consumption. Additionally, Eco-Q was built with the help of an online IDE (Glitch) to execute the code and create the website interface since we were all first-time hackers. Thus, moving forwards, we aim to transfer the code to GitHub, make the code more friendly to different platforms (mobile view, desktop view, and so on) and establish a unique domain name for our website.

Built With

Share this project: