Click here to Skip to main content
12,693,094 members (30,461 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


6 bookmarked

Tip Calculator App - How we did it

, 9 Aug 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Tip Calculator App - How we did it

Editorial Note

This article is for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers


My colleagues and I are huge fans of sushi, and often go out to eat together. It was during one of these outings that we talked about just how great it would be to have a tip calculator app that not only tells us how much tip is due total on a bill, but also tells us how much tip, on top of the total sum, every person in our party owed separately. As we utilize devices that operate on different platforms, we wanted an app that would work on all those different platforms.


It just so happens that we have first-hand knowledge of PhoneJS – we develop it. So, not too long after this sushi outing, Alex took the time – an hour to be precise – to create the Tip Calculator we all talked about earlier.

We are thrilled to present it to you here!


We have added this application to our site as a demo app. This allows you to try it out online right away.

Structurally, the TipCalculator app is a simple one-page application with a single view. It was built following the MVVM pattern (Model-View-ViewModel). The page is represented by a View, which is defined as HTML markup. The ViewModel is a JavaScript object that binds together the View and the Model, and is returned by a function that is executed automatically when the View is rendered. This ViewModel object contains a set of properties for the input values and another set for the calculated results. The ViewModel is bound to the View using Knockout MVVM capabilities.

We decided to share the application project with you (on GitHub) so that you can peruse the source code, learn how the application is implemented, its structure, and how easy it was to implement the functionality using the framework. Generally, you can explore only the code contained in the home.html and home.js files. This is the only code that we had to implement, because we used the project template supplied for PhoneJS applications.

For details about how the TipCalculator app is implemented, visit the TipCalculator Demo tutorial. We hope that the implementation of this app will inspire you to use PhoneJS to write an interesting and useful mobile app of your own. Good luck!


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Mary Sammal
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170118.1 | Last Updated 9 Aug 2013
Article Copyright 2013 by Mary Sammal
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid