Current Weather Widget

by Emmanuel Garcia

HTML

<!DOCTYPE html>
<!--[if IE 8]>    <html lang="en" class="ie ie8">    <![endif]-->
<!--[if lte IE 7]><html lang="en" class="ie lteie7"> <![endif]-->
<!--[if gt IE 8]> <html lang="en" class="ie ie9 W3C"><![endif]-->
<!--[if !IE]>-->  <html lang="en" class="W3C">       <!--<![endif]-->
    <head></head>
    <body>
<div id="wrap">


<div id="wxWrap">
    <span id="intro">
        Currently in Oliver, CA: 
    </span>
    <span id="icon"></span>
    <span id="temp"></span>
</div>

    <p><a href="http://www.onextrapixel.com/2011/08/22/adding-weather-to-your-site-with-jquery-and-yql">Adding Weather to your Site with jQuery &amp; YQL</a></p>
    
</div>
</body>

JavaScript

// javascript will go here
$(function(){

    // Specify the ZIP/location code and units (f or c)
    var loc = 'CAXX0336',
        u = 'f',
        query = "SELECT item.condition FROM weather.forecast WHERE location='" + loc + "' AND u='" + u + "'",
        cacheBuster = Math.floor((new Date().getTime()) / 1200 / 1000),
        url = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&format=json&_nocache=' + cacheBuster;

    window['wxCallback'] = function(data) {
        var info = data.query.results.channel.item.condition;
        $('#wxIcon').css({
            backgroundPosition: '-' + (61 * info.code) + 'px 0'
        }).attr({
            title: info.text
        });
        $('#icon').append('<img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />');
        $('#temp').html(info.temp + '&deg;' + (u.toUpperCase()));
    };

    $.ajax({
        url: url,
        dataType: 'jsonp',
        cache: true,
        jsonpCallback: 'wxCallback'
    });
    
});