<div data-role='page' id='root'>
   <div data-role='header'>
     <h1>Exchange Rate</h1>
     <a class='ui-btn-right' data-role='button' data-transition='slide' href='#about'>關於</a>
   </div>
   <div data-role='content'>
     <label for='cny-input'>人民幣</label>
     <input type='number' id='cny-input' placeholder='0.00'>
     <input type="submit" id='submit' value="Show me the MOP">
    <p id="result">CNY $0.00 = MOP $0.00</p>
  </div>
</div>

<input type='text' placeholder='0.00'>
<input type='number' placeholder='0.00'>

 // Model
 ;(function($){
   var app = this.app || (this.app={});
 
   var key = '<API_KEY_HERE>';
   var url = 'http://openexchangerates.org/api/latest.json?app_id=' + key + '&callback=?';
 
   $.getJSON(url, function(data){
     // console.log(data); // print the JSON response.
    app.rates = data.rates;

  });
}).call(this, jQuery);

 // Exchange module (part of the Model)
 ;(function(){
   var app = this.app || (this.app={});
 
   function Exchange(value, srcCurrency) {
     var srcPerUsd = app.rates[srcCurrency.toUpperCase()];
     var usdPerSrc = 1 / srcPerUsd;
 
     return {
      to: function(targetCurrency) {
        var targetPerUsd = app.rates[targetCurrency.toUpperCase()];
        var srcPerTarget = usdPerSrc * targetPerUsd;
        return value * srcPerTarget;
      }
    };
  }

  app.Exchange = Exchange;
}).call(this);

 // View
 ;(function($){
   var app = this.app || (this.app={});
 
   var result = $('#result');
 
   app.view = {}
   app.view.button = $('#submit');
   app.view.input = $('#cny-input');

  app.view.updateResult = function(cny, mop) {
    result.html('CNY $' + cny.toFixed(2) +' = MOP $' + mop.toFixed(2));
  }

}).call(this, jQuery);

;(function(){

  app.view.button.on('click', function(){
    var cny = app.view.input.val() * 1;
    var mop = app.Exchange(cny, 'CNY').to('MOP');
    app.view.updateResult(cny, mop);
  });
}).call(this);