Tip calculator and bill splitting apps

Subscribe to my newsletter and never miss my upcoming articles

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. jQuery-powered tip calculator is web app-enabled

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. iOS-optimized including an app icon. Add it to your 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! The tip calculator works on BlackBerry too.

Live updating

As you type, the totals are live-updating. Changing values automatically updates the tip amount so users can see updates right away. Check out the jQuery-powered tip calculator on your phone.

Tip calculator written in Angular.js

I built a tip calculator and bill splitting app using the Angular.js JavaScript framework.

Tip calculator is mobile-optimized

Tip calculator and bill splitting app on iPhone 4S

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. Tip calculator and bill splitter app interface

Home screen-optimized icon

A home screen-optimized icon was designed so that you could save the page to your home screen. Tip calculator home screen icon save Tip calculator on home screen Check it out on your phone.

No Comments Yet