<div data-role='page' id='root'>
  <div data-role='header'>
    <h1>Rain or Not?</h1>
    <a class='ui-btn-right' data-role='button' data-transition='customslide' href='#about'>關於</a>
  </div>
  <div data-role='content' id='rain-content' class='loading'>
  </div>
</div>

 ;(function($){
   $.getJSON('http://api.openweathermap.org/data/2.5/weather?q=Macao,MO&callback=?', function(data){
     console.log(data);
     var code = data.weather[0].id + ""; // force to string
     if (code[0] === '5') { // rainy code all start at 5
       $('#rain-content').removeClass().addClass('rain');
     } else {
       $('#rain-content').removeClass().addClass('sunny');
     }
  });
}).call(this, jQuery);

 .sunny {
   background: #ade1f9 url(../images/sunny.png) no-repeat center center;
 }
 .rain {
   background: #ade1f9 url(../images/rain.png) no-repeat center center;
 }
 .loading {
  background: #ade1f9 url(../images/loading.png) no-repeat center center;
 }

#root {
  background: #ade1f9;
}

#rain-content {
  height: 400px;
}