Heel Meals - Meal Swipe Tracker

• 

  Landing page

• 

  Login page

• 

  Survey Page

• 

  Dashboard

*Heel Meals- Meal Swipe Tracker *

Inspiration: As UNC students, we know the struggle of constantly calculating our meal swipes and making sure we have enough to last the whole semester. We decided to create Heel Meals to help ourselves and our fellow Tar Heels track meal swipes, plus swipes, and how many days we can continue on our typical diets.

What it does: Heel Meals starts with a login page, allowing users to save their information under their profiles. Next, first time users can enter their current number of meal swipes, their current number of plus swipes, and how many meals they would like to eat per day. They can navigate to the Dashboard, where their meal swipe count, plus swipe count, and a calculation of how many days they can continue with their diet is displayed. Additionally, the Dashboard contains buttons that users can click to log meal swipes and plus swipes, which will update the display values.

How we built it: We decided to build our website using HTML, CSS, and JavaScript.

Challenges we ran into: Initially, we tried to build our website using Python and integrate it into our HTML code. However, we realized that this was not the most efficient method and switched to JavaScript. As first time GitHub users, we had trouble understanding the details of coding our project together. Additionally, we ran into errors and difficulties when trying to store inputs from the user and display them on the next webpage. After many rounds of trial and error, and getting help from the amazing mentors, we were able to solve these issues!

Accomplishments that we’re proud of: Pearl Hacks 2025 was our first hackathon, and we are so pleased with how much we achieved in the past 24 hours. This was our first time coding collaboratively, and we had to learn how to use Github and VSCode in a very short amount of time. We came into this without a set idea, and for some of us- not even knowing each other! As we went along, we learned so many new concepts from HTML, CSS, and Javascript while simultaneously creating our project.

What we learned: Though we learned so many technical skills, the biggest lesson we learned was about teamwork and collaboration. We all have different skills and experience levels, and so we had to account for that while delegating our tasks. Especially since we are used to coding individually, we made sure to put in extra effort to communicate and take everyone’s ideas into consideration. Additionally, we were able to experience building a full project from start to finish in a small time frame. This taught us how to think fast on our feet and come up with innovative solutions!

Built With

• css
• html
• javascript