Tip calculator and bill splitting apps
I built two tip calculator apps at different times—one using jQuery and one using Angular.js.
Tip calculator written in jQuery
My first attempt at writing a tip calculator was using jQuery over the Christmas holidays in 2012. This tip calculator calculates the tip on the pre-tax subtotal. It calculates the tip and tax separately using the subtotal as the base and then adds both values to the subtotal. Tip and tax are calculated independently of each other and tip does not include tax (nor vice-versa). Default tax included is Ontario HST at the time of writing this article.
Optimized for iOS
The tip calculator layout is optimized for iOS and was tested on an iPhone 4S device. It also includes an icon so that it can look nice on the home screen. Back when this tip calculator was written, Mobile Safari would commonly automatically refresh the page once it was foregrounded. If a user had any fields filled out, all field values were lost. I added support to persist the fields in case of automatic refresh using the Local Storage API found in all modern browsers. Although it is optimized for iOS, it doesn't look so bad on a Blackberry!
As you type, the totals are live-updating. Check out the jQuery-powered tip calculator on your phone.
Tip calculator written in Angular.js
Tip calculator is mobile-optimized
Easy to use
The application allows you to specify the bill total, determine how much you would like to tip using a user-friendly range slider, and see your tip and after-tip total update in real time. It will also allow you to specify how many ways to split the total cost of the bill.
Home screen-optimized icon
A home screen-optimized icon was designed so that you could save the page to your home screen. Check it out on your phone.