Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / MVVM

Tip Calculator App - How we did it

5.00/5 (1 vote)
9 Aug 2013CPOL2 min read 12.1K  
Tip Calculator App - How we did it

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

Introduction

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.

 Image 1

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!

 Image 2

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!

License

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