Ocean Savers

Inspiration

Since there is a lot of ocean plastic I wanted to focus on how it affect marine life and the impact of marine life on us.

What it does

The impacts page in the app is for viewing the impact of the pollution including 2 simulations on how the life of fish is impacted by pollution. The events page is where you can add/view events page where you can join events to help or make your own events to help others. The get involved page shows the different types of trash bins and what to sort in each bin and also a carousel showing the ways you can help

How we built it

Built a figma of the design of the app and made ideas for many of the app pages. Used a plugin to write html code from the figma design. Added animations and storage to basic html page. made a simulation using javascript.

Challenges we ran into

make the physics of the simulation and all the fish instances working properly make the design responsive based on the width and height of the window

Accomplishments that we're proud of

learned a lot of animation

What we learned

I learned how to animate using css simulation physics making responsive components

What's next for Ocean Savers

add user and login features track hours spent in app

Built With

• css
• figma
• node.js
• typescript