Weather Page - Updated

<!DOCTYPE html>
<html>
<head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:100px;
}

#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:30px;
}
</style>
</head>

<body>

<div id="header">
<font size="5"><h1>Weather Search</h1></font>
</div>

    <form ><p><center>
                Enter your location: <input id = "uid" type = "text" name="location">
                <br>
                <input type = "button" value = "Enter" id = "b">
      </form></p></center>

    <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 = "882e641582ec4932ba6ff5c9dad5e";


        myQuery = {};
        myQuery.format = "json";
        myQuery.num_of_days = "5";


        $("#b").click(function (){

           myQuery.q = $("#uid").val();

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

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

           // alert("The API call is" + req);

            $.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;
                var visibility = res.data.current_condition[0].visibility;
                var windspeedMiles = res.data.current_condition[0].windspeedMiles;
                var FeelsLikeC = res.data.current_condition[0].FeelsLikeC;


                $('#infoSummary').html('<center><img src="'+ weatherIconUrl + '"height="150" width="150"></center>');
                $('#infoDetails').html(
                    "<center>At the time <b>" + observation_time + "</b>" +
                           " the weather for " + myQuery.q + " was at <b>" + temp_C + " &deg;C </b>" +
                           " with cloud cover of <b>" + cloudcover + "%</b>." +
                           "<b><p>Other Stats</b> - <p>Visibility is currently at - <b>" + visibility +"%</p></b> <p>Wind Speeds of - <b>" + windspeedMiles + "MPH</b><p>Feels Like - <b>" + FeelsLikeC +"&deg;C</p></b></center>");
            });
        });
    </script>

<p>
<p>
<p>
<p>
<p>
<div id="footer">
<font size="3">Paymon - M00435694 - CSD2550</font>
</div>


</body>
</html>