Calorie Counter

blog single

The ins and out of Calorie Counter


Calorie Counter is a project I was assigned with in college. The topic was Developing Web Applications. Calorie Counter is a application designed to let the user keep track of their daily calorie intake.

The first stage is the splash screen, this lets the user enter their name. The name is then stored into localStorage and is used through out the application. This was designed to add a personal feel to the application.

The next stage uses jQuery mobile's search features. This page allows the users to search through the food groups and select the food items they have eaten.


Once the user have found the item they wish to select, they click on the image of the item and once again we used local storage to add the value of the item to the total number of calories eaten.

From this point a popup will appear and tell the user how many calories they have eaten today. There is a clear button if the user wishes to clear the amount to start again.

A calorie information page was designed using AJAX to add more data into the page if the user wishes to read more about calories and diets.
There is also a podcasts page using a database to collect information and food podcasts for the user to listen to. This also uses AJAX to load the data on to the page