Over a million developers have joined DZone.

How to Create a Calculator in PhoneGap

· Mobile Zone

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

A lot of beginning PhoneGap developers have asked me if I had a simple PhoneGap tutorial. They didn't want anything complicated. No Backbone, no jQuery Mobile, no ChocolateChip-UI, just plain old HTML, CSS, and JavaScript. So I brought back one of my favorite tutorials, a calculator, stripped it down almost to the bare metal.

I designed this calculator to be reminisce of the one included in the iPhone. In order to get the look of the iPhone's Helvetica Neue font, I used Google Font's Source Sans Pro Extra Light. If you would like to include Google Font's in your app, please check out my post: Using Google Fonts in a PhoneGap App

There is only one complicated part of this app, the ready.js file. In order to make sure that I don't let the app start fully running until both the Cordova "deviceready" and the jQuery "document ready" events have fired, I use a couple of jQuery Deferred objects to wait until those events have both fired. The code in the poorly named, router.js, calls the resolver's initialize method and once the events have fired the passed anonymous function code runs, which calls the calculator method.

rnc.calculator = function () {

  $(".key").on('touchstart', function (event) {
    var key = $(this).attr("data-rnc-tag"),
      id = this.id;

    // this is a performance boost
    switch (id) {
      case "key0":
      case "key1":
      case "key2":
      case "key3":
      case "key4":
      case "key5":
      case "key6":
      case "key7":
      case "key8":
      case "key9":
      case "keyDecimalPoint":
      case "keyC":
      case "keyCe":
      case "keyAdd":
      case "keySubtract":
      case "keyMultiply":
      case "keyDivide":
      case "keyEquals":
      case "keyPercent":
      case "keyPlusMinus":
    return false;

The calculator.js is the heart of the app. It consist of two methods, Display and calculator. The calculator method hooks the keys. It is import here to note that the I am hooking the touchstart event. You don't want want to use the click event. The click will work but it will be slow on many devices including the iPhone. The reason is that the click event will do a wait for about 300 milliseconds while it tries to see if you are going to click it again for a double click. Touchstart on the other hand does no such wait. This will give your calculator a responsive UI. I also call event.preventDefault() and event.stopPropagation() both of these will also provide a boost in performance by keeping code which doesn't need to run from running. 

That's it for now. As always the code is on GitHub for you download and make your own. 

Source Code on GitHub

The Mobile Zone is brought to you in partnership with Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.

java,css,mobile,javascript,web design,jquery,tips and tricks,tools & methods,html & xhtml,phonegap

Published at DZone with permission of Troy Miles, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}