Greener Earth

Our Home Page
Our Mission
Options for user to pick and learn about the issue/s they are interest in
Interactive Lesson and Quiz
Interactive Graph

Inspiration

COVID-19 has made us realize that it is really humans who are destroying the environment, so we wanted to make this project to show how people can contribute to the betterment of our society and be part of the solution to problems. Over the years, we have learnt just how important it is to help our environment. It is in everyone’s best interest that we keep our world clean and do our part to learn how to care for the environment and what affects it. The increasing damage to our one and only home, the Earth, is not only bad for us, humans, but causes major damage to the Earth’s biodiversity. With the help of this website, we hope more people understand the severity of these issues and start to make a positive impact in the world. We only have one Earth and it is up to us to take care of it.

What it does

This website has interactive features that users can click on and hover to learn more about the environmental issues. In “how you can help” page, there are different kinds of environmental issues that users can learn about. “Interactive lesson” teaches users the environmental cycle and how the cycle affects the environment. There is also a quiz section after the lesson that users can take to check their knowledge.

How we built it

We started by creating a framework for the website with the navigation bar, and from there we added an HTML file for each tab and added more code to put images, texts, and buttons. We used a platform called repl, where multiple people can edit code at once which made it easier for us. Repl also lets us test out our website and provides us with the link for the website that can be accessed from any browser.

Challenges we ran into

We had a problem with making a quiz through JavaScript but we were able to find another way to make the quiz. Also there were some issues with placing the four buttons for the “how you can help” page but eventually we figured out how to lay out the buttons in a neat way. These problems helped us gain more knowledge and aided in tackling similar problems in different parts of the code

Accomplishments that we're proud of

We are proud of researching many environmental issues and compiling them on one website so that it’s easier for users to learn about multiple issues in one webpage. We are also proud of creating the interactive features like buttons and quiz which we had the most difficulty with. And most importantly we are proud of being able to make a website that is for a good cause and will help spread awareness for more people to take initiative.

What we learned

From working on this project, we were able to review our skills for HTML and CSS and learn about some more new concepts, such as making a quiz and adding hovering features. This project also helped us with our teamwork skills, and we learned what it’s like to collaborate with others to create something together. This was a first hackathon for all of us and it was a really unique and beneficial experience. Creating something in 48 hours requires a lot of dedication and thought.

What's next for Greener Earth

We want to add a features that lets the users input their data on how much energy/water they saved or wasted and be able to display the results as a graph over multiple days from the user input data. We also want to add a dynamic map that tracks the water and air quality of the cities across the country and shows how the measures are fluctuating each day in these cities.