Glacier Web App

• 

  Glacier Web APP

• 

  Enter your water bottle volume

• 

  Glacier calculates the number of water bottles

• 

  Glacier visualizes how many bottles you need to drink

• 

  Click on a bottle to mark it finished!

Inspiration

We came into this Hackathon knowing that we wanted to create a project that would help people. So we started thinking: what are some small things that people forget to do that we can help them keep track of. Suddenly, after I got up to fill my water bottle, it hit us. We realized that it is very easy to get caught up in work and forget something as simple as drinking water. So, we decided to create Glacier.

What it does

Glacier helps you stay hydrated by tracking how much water you have drank so far and how much more you need to get your recommended 2 litres per day.

Glacier is super user-friendly, involving only a 2-step process.

Step 1: Open the glacier application ( index.html for now :P ), then enter your water bottle size. e.g 1000mL.

Then, glacier will automatically calculate how many water bottles you need to drink to reach 2L.

Step 2: Now a page will appear with that number of water bottles on it. All you have to do is click a water bottle every time you finish one!

Finished water bottle:

How we built it

Glacier was built in pure HTML, CSS and, javascript. This was beneficial for us as we did not previously have much experience working with these languages.

Challenges we ran into

Oh so many haha. The biggest problem we kept running into was trying to get the bottles to actually be added to the page.

Eventually we figured it out, had to use window.load to make sure that the entire page was loaded before we started adding any bottles.

Accomplishments that we're proud of

We are proud of the fact that even though we had very little experience with web development and our weekend schedule was packed full of assessments and projects, we still managed to come together and create something nice.

What we learned

We learned that the most important phase of any project is the design phase. Thanks to a thorough design, we were able to implement and create our idea very quickly and (somewhat) smoothly.

What's next for Glacier Web App

There are still some kinks that we have to work out with the app, especially when the water bottle count becomes very large. We would like to implement a counter (e.g bottle x54) instead of having 54 water bottles show up on the screen.

We also want to add another page that the user would be redirected to once they finish all of their water bottles.

Built With

• css
• html
• javascript