Weather widget Jquery

Weather widget Jquery

I just wrote a code to practice how we can render a JSON data if it is available to you in an array/ key value pair format. It is using the plain Jquery. I have separated HTML, JS and CSS in different files.

Here goes the code.
HTML:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Weather</title>
  <script src="js/jquery.min.js"></script>
   <script src="js/weather.js"></script>
  <link rel="stylesheet" href="css/weather.css"  type="text/css">

<script>

 $(document).ready( function() {

 var cities = [{
     "name": "Delhi",
     "temperature": "42 Celsius",
     "humidity": "234cm"
 }, {
     "name": "Banglore",
     "temperature": "34 Celsius",
     "humidity": "230cm"
 }];

  for (var i in cities) {
  $('div#main > ul').weather({
name: cities[i].name,
temperature : cities[i].temperature,
humidity: cities[i].humidity
});
  }

});

</script>
 </head>
 <body>
<div id="main">
<p>Weather</p>
 <ul>

 </ul>
</div>

 </body>
 </html>

CSS

#main{
width:25%;
background-color:#F0F8FA;
border:2px solid #9CBFDF;
border-radius:15px;;
margin-left:20px;
  }
  #main p{
color:#37991d;
font-size:xx-large;
text-align:center;
  }
  ul li{
  list-style-type:none;
  margin-left:35px;
  padding:5px 0;
  }
  .temp{
font-size:large;
  }
  .detail{
font-size:large;
  }
  .chead
{
font-size:x-large;
list-style-image:url('../img/pertlycloud.png');
}

JS

  (function($) {
   $.fn.weather = function(options) {


var defaults = {
name: "City",
                   temperature: "10 Celsius",
                   humidity: '200cm'
            };
var options = $.extend(defaults, options);

return this.each( function() {
  var output = '<li class="chead">'+options.name+'</li><li class="temp">'+options.temperature+'</li><li class="detail">'+options.humidity+'</li>'
  $(this).append(output);
  });

   }
 

 })(jQuery);

Don't forget to add Jquery file in your js folder: I have used  jQuery v1.9.0 .
Hope this will help. It can be enhanced further to make it a Jquery plug-in or Jquery widget.