— jQuery – Weather Widget
This code fetches data from a xml provided by google APIs, it requires jQuery and very little code of PHP. Last night my friend Prabodh asked something like this in java but unfortunately i don’t know JAVA so i did it in jQuery and PHP.
If you have any comment or ways to improve it, just leave me a comment!
Write Some PHP
<?php
header("content-type: text/xml");
$where = $_GET['where'];
$xmlData = file_get_contents("http://www.google.com/ig/api?weather=$where");
echo $xmlData;
?>
YUP, that’s it, you only have to do this much PHP 
. Save it as google-weather.php.
XML – Returned from above php script
HTML and CSS – Whatever
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Weather Widget</title>
<style type="text/css">
body{font-family:Georgia,"Times New Roman",Times,serif;color:#FFFFFF;font-size:12px}
.rbroundbox { background: url(images/nt.gif) repeat; }
.rbtop div { background: url(images/tl.gif) no-repeat top left; }
.rbtop { background: url(images/tr.gif) no-repeat top right; }
.rbbot div { background: url(images/bl.gif) no-repeat bottom left; }
.rbbot { background: url(images/br.gif) no-repeat bottom right; }
/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 6px; display:none;}
.rbroundbox { float:left; margin: 1em auto; }
.tag{font-size:9px;
font-weight:bold;
letter-spacing:0.2em;
text-transform:uppercase;}
.data{color:#CCCCCC; font-weight:normal;margin-left:10px}
#error{color:crimson;}
</style>
<script src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//jQuery Rocks
})
</script>
</head>
<body>
<input type="text" id="place" /><input type="button" value="Weather Search" id="submit" /><br />
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent tag" id="error">Sorry No Data Found!</div>
<div class="rbcontent tag" id="data">
<span><img src="" id="icon" /></span><br />
<span>City -</span><span class="data" id="city"></span><br />
<span>Date -</span><span class="data" id="date"></span><br />
<span>Condition -</span><span class="data" id="condition"></span><br />
<span>Temperature -</span><span class="data" id="tempC"></span><br />
<span>Humidity -</span><span class="data" id="humidity"></span><br />
</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div>
</body>
</html>
jQuery – The Rockstar
var childData = function(selector, arg)
{
return selector.find(arg).attr('data');
}
var sendAjax =function(where){$('#data, #error').stop().hide('fast');
$.ajax({
type: "GET",
data:"where="+where,
url: "google-weather.php",//URL of our php page
success: function(data){
forecast = $(data).find('forecast_information');
cCondition = $(data).find('current_conditions');
city = childData(forecast, 'city');
if(city!=undefined)
{
date = childData(forecast, 'forecast_date');
condition = childData(cCondition, 'condition');
tempC = childData(cCondition, 'temp_c');
humidity = childData(cCondition, 'humidity');
icon = childData(cCondition, 'icon');
$('#city').text(city);
$('#date').text(date);
$('#condition').text(condition);
$('#tempC').text(tempC+' C');
$('#humidity').text(humidity);
$('#icon').attr({'src':'http://www.google.com'+icon})
$('#data').stop().show('fast');
}
else
{
$('#error').stop().show('fast');
}
}
});
}
$('#submit').click(function()
{
where = $('#place').val();
sendAjax(where);
})
That’s It 
…
I know its not very well explained but what can I do, am very bad in explaining things and some times lazy too.. 
If you have any comment or ways to improve it, just leave me a comment!
-
Krisen Pillay
-
Pranav Prakash
-
sunnyluthra
Supporter PyCon
bhai ek baar hi try karna tha
Share Some Love