apiweather.html

<!DOCTYPE html>
<html>
<head>
  <title>Learning JQUERY API</title>
</head>
<body>

    <div id='infoSummary'>

    </div>

    <div id='infoDetails'>

    </div>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        serviceLocation = "http://api.worldweatheronline.com/free/v2/weather.ashx";
        key = "b4c0094fbfe03d010d386b5f41c9e";


        myQuery = {};
        myQuery.format = "json";
        myQuery.q = "London";
        myQuery.num_of_days = "1";
        myQuery.date = "today";


        req = serviceLocation + "?";
        $.each(myQuery, function (k, v) {
            req += k + '=' + v + '&';
        });

        req += 'key' + '=' + key;

        $(document).ready(function (){

            $.getJSON(req, function (res){

                var weatherIconUrl = res.data.current_condition[0].weatherIconUrl[0].value;
                var observation_time = res.data.current_condition[0].observation_time;
                var temp_C = res.data.current_condition[0].temp_C;
                var cloudcover = res.data.current_condition[0].cloudcover;


                $('#infoSummary').html('<img src="' + weatherIconUrl + '" height="342" width="342">');
                $('#infoDetails').html(
                    "At the time <b>" + observation_time + "</b>" +
                           " the " + myQuery.q + " temperature was <b>" + temp_C + " &deg;C </b>" +
                           " with cloud cover of <b>" + cloudcover + "%</b>.");
            });
        });
    </script>

</body>
</html>