Inspiration

Our inspiration came from a combination of two of the challenges, social and environmental hack. We believed that intersectional issues that involve both social justice and the environment aren't talked about enough. We found a timeline on the EPA's website about the history of environmental justice and wanted to expand it to be more engaging and informative to the everyday user.

What it does

Our project walks you through the history of the environmental justice movement. When you scroll through the timeline, you will see the elements are animated, each contain a header, date, image, and a link to find more information. When you hover over each element, the element changes color, expands, and gives you an explanation of the event.

How we built it

We built our project using repl.it to collaboratively code in HTML and CSS. We communicated, brainstormed, and debugged using discord to communicate. We also used W3schools and Stack Overflow to assist us in building new things and answering our questions. We also used GitHub to host our code in an easily accessible place.

Challenges we ran into

We ran into challenges with the spacing of our project, and the more minute details of the website, but we were able to work together and ultimately create something we are proud of.

Accomplishments that we're proud of

We are proud of creating such an interactive project for the user to learn from. We think that all the css animations created a website that the user will enjoy interacting with. We initially expected a larger team and we are proud of creating a project that exceeded our expectations with only two people.

What we learned

We learned a lot about how CSS animations work and how much CSS can do, without ever touching JavaScript. We also learned a lot about z-indexes and the difference between absolute and relative positioning during debugging a sizable bug in our project.

What's next for Climate Clock

In the future, we would like to add more animations, a more user-friendly layout, and more historical events to the project. We would also like to create the website into a game of sorts for the user, using more pages and animations.

Built With

Share this project:

Updates