EcoTrack

DISCLAIMER: This project was created for MakeSPP 2020!

Nesa and I met at MakeSPP 2019. We have grown to be great friends who have found common interests outside of coding. Both of us are very passionate about health and the environment. This year, we wanted to create a project that helps our environment blossom, especially in a time filled with so much negativity. This is how we thought of EcoTrack!

What it does

EcoTrack is a website that provides you with a tracker that tracks your recycling habits. By completing challenges, the tracker motivates you to keep on recycling and making the world a healthier place to live in. EcoTrack also includes many resources such as websites to donate to and yummy recipes that are eco-friendly!

How I built it

EcoTrack was built using html, css, and javascript on repl.it. We linked three web pages together, each with separate code to create a website! In html, we used basic commands such as divs, links, headings, classes, and more! For javascript, we used many if, then statements where we let tasks equal a number value. Finally in css, we used many different styling commands. A few of them include background, font-family, position, transform, and more!

Challenges I ran into

Often we have really big ideas in our head but just don’t know how to make them come to life. While designing the tracking page that was one of the biggest challenges we faced. We thought about all these amazing ideas of how it could work but with limited skills we felt restricted from being able to do more. But, in the end we were successfully able to create a progress bar that reacts according to the amount of tasks you checked. Writing the javascript code for this progress bar was also challenging. Making the correct function in correlation to the progress bar moving enough spaces was something that consisted of a lot of trial and error. Even though this design isn’t what we fully intended to do, we are proud of the amount of effort we have put into it for the final outcome. The layout was also difficult to design. Positioning all of the different headings, links, and photos was very frustrating at times. However, we were driven to get each aspect of our website how we wanted it.

Accomplishments that I'm proud of

We are very proud that by the end of MakeSPP we developed a website that is fully functional and looks presentable! We are also super proud that we were able to create a functional tracker!

What I learned

We learned so much from this project!! We both got a deeper understanding of the three languages that we used with the help of the workshops provided by MakeSPP and the mentors. We learned how to style the page to make it look beautiful, we learned how to use javascript, and we even learned more about the planet we live in!

What's next for EcoTrack

In the future, we want to implement many more features into EcoTrack. For instance, one of the things we want to add is a way to store information from the tracker. Right now, if you were to finish half of the checkpoints in the tracker, your progress would not be saved if you left the page. We really want to make this so that we could add more and more progress trackers as the user completes the challenges. We also would like to add users to EcoTrack. Users would be able to create accounts and then use the tracker. Nesa and I both want to make EcoTrack the best it can be! We are looking forward to working on it post hackathon.