Learn to Build a Meal Tracker Using jQuery Mobile


jQuery Mobile is a web framework also known as a mobile framework more specifically a Javascript library is developed on the basis of creating a framework which is widely compatible with a wide variety of smartphones, tablets and computers. It is also compatible with other frameworks such as PhoneGap, Worklight and more.

Some of the Features of jQuery are compatible with all major desktop and mobile platforms. A theming framework allows the creation of custom themes, limited dependencies, a codebase that scale to any screen, HTML-5 driven configuration with minimal scripting, AJAX-powered navigation with animated page transition and touch-optimized and a platform-agnostic UI widget.

In this blog, we will learn to build a simple Meal Tracker using jQuery and local storage. Local storage will allow us to save strings to local client i.e browser.

First, we will create a custom theme using the theme roller. Theme Roller is a jQuery custom theme builder to make a highly customized theme by just drag and drop colors and those themes are downloadable too.

We will apply this theme to our html file consisting of Homepage, Meal page and Add page.


OUTPUT: Meals Page

Meals Page

ADD Meal Page

ADD Meal Page

We have created an outline of our Meal Tracker but it is not yet functional so that we can add, delete, save, get our meal at Local Storage as well as calculate the calorie count too.



Meals Page: Stored in Local Storage as seen in the URL.

Meals Page: Stored in Local Storage as seen in the URL

Add Meals

Meals Details

Meals Details


Either you are a gym goer or some health freak always worried about gaining weight, it is one such application which tracks the total calories consumed from any meal. Whether be it scrambled eggs or the red meat, now you can track everything with precision.

So there you go, a fully functional meal tracker is ready using jQuery mobile. In the meantime, if you are interested to learn all the details of jQuery Mobile from beginning then you can explore all the different sections of Learn jQuery Mobile from Scratch online tutorial.


Please enter your comment!
Please enter your name here