Jun 14, 2013
Mary Sammal

Tip Calculator App - How we did it

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.

At Lunch

It just so happens that we have first-hand knowledge of DevExtreme – 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!

Tip Calculator App

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 DevExtreme 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 DevExtreme to write an interesting and useful mobile app of your own. Good luck!