This week’s tutorial was requested by a user on our support site (http://mobilenationhq.zendesk.com). It shows how you can use MobileNation’s javascript widget to create a simple countdown timer that decrements from 100 to 0. We make use of the following components:

  • Label
  • Button
  • Timer
  • Javascript


Essentially, we create a custom javascript that declares a global variable, window.theCount. When the following javascript is executed, we update our label’s text to reflect this variable’s current value.

The code is as follows:


{
"decrementCount": function() {
if (window.theCount == null) window.theCount = 100;

if (window.theCount >= 0) {
MN.find('Default View/label').text = window.theCount;
window.theCount--;
}
}
}

Now to make this countdown occur every second, we execute this the decrementCount javascript function by wiring it to a timer widget’s Interval reached action. You could just wire it to a button to make the number decrement every time someone clicks on a button, for instance, but we want to make this happen every second.

Finally, we create a button to start the timer. We wire from the button’s touch down action to the timer’s “start timer” responder.

Got a problem you can’t solve? We make a weekly youtube tutorial for the best questions. Drop us a line at http://mobilenationhq.zendesk.com