Inspiration

As we all have heard, there is a common phenomenon known to college students known as the “Freshmen 15” in which students often overindulge in eating their first years in college due to the new freedom found without the guidance of parents in their nutrition. Thus, we thought of an idea in which we allowed the tracking of calories through user input of what food items they had eaten that day. Not only this, but students often find themselves struggling to maintain their dining dollar balance, so we also added a dining dollar cost to show students how much they are spending so that they can control their spending. We were inspired by students who struggled to maintain a healthy diet and dining dollar balance. We hope that through this service, our community can better plan for their health and food consumption.

What it does

The program has a database for the menus of various dining halls on the UCSD campus that includes the food items they have on a daily basis. Users can select a dining hall and search for the name of a food item they have or wish to consume. That food item is then added to a list which calculates the total amount of calories eaten by adding all the calories from items on the list. This service does the same for the cost, displaying the total money spent on the food items.This provides quick and easy access to the caloric value of each dining hall food without the hassle of having to look it up on the sometimes buggy HDH website.

How we built it

Before we built the program, we planned out the layout and how we wanted it to work through Figma. We created a rough idea of the home page and each page for the dining hall. Then, we used Adobe illustrator in order to design the layout of each unique button for the dining hall. These buttons were then implemented through HTML and CSS on the home page for the webpage domain that we bought with domain.com. The website itself was hosted on Github pages. The search bar and table was designed through a combination of HMTL, CSS, and Javascript. The backend was designed with node.js, specifically with the express.js framework. We were able to web scrape the data from the UCSD HDH website to store all of the foods’ cost and nutritional information in a database. The search bar iterated through the database to find matches and ultimately, add it to the table of foods.

Challenges we ran into

We often found ourselves challenged by the backend of the program. We had trouble collecting the data from the HDH website for their nutritional values and names of the foods. There were also many minor details such as the sizing of the graphic images, return buttons, etc. We went through many versions of our program to continually check and fix for details that we could improve on throughout the hackathon.

Accomplishments that we're proud of

We are very proud of the overall work we were able to produce in such a short time and for us being mainly beginners. We went in without a stable idea and were able to produce a decent output in which we could use and functioned in the way that we wanted to. Learning new programming languages within the same day and being able to create something out of nothing was a very fun experience for all of our team. There were many minor details that we had to fix and were mainly successful in doing so, which was tedious but felt very rewarding at the end of the day.

What we learned

We learned many things about CSS, HTML, Javascript, and designing through this project. As most of us are beginners to coding, this hackathon was very helpful in allowing us to challenge ourselves in new ways and learn new things that we probably wouldn’t have gone out of the way to do ourselves. Designing this program allowed us to see many errors that we were not expecting so we had to analyze them and solve them individually. We also learned a great deal about web scraping and Javascript runtime environments such as node.js. Additionally, we learned how webservers worked and how synchronous processes worked.

What's next for UCSDCalorie

We envisioned the addition of other macro nutritional facts such as proteins and fats to better help showcase the individual foods and guide the users dieting. We also wanted to webscrape the nutritional facts from UCSD HDH and host it on a web server where we can pull the data from it daily to keep the foods and their data updated consistently.

Share this project:

Updates