How to get weather live detail for your website

 we have created, the header graphic will change to one of four different styles based onSunny, Rain, Snow, and Cloudy.

Step 1: Designing your weather graphics

Our example site changes header graphics as as well as an icon in the sidebar to describe the weather. For the sake of example, we only created four different weather scenarios, defaulting to sunny.

Step 2: Retrieving the weather information

Yahoo! has an API for weather information. We can tap into this very easily using an URL formatted like so:

http://weather.yahooapis.com/forecastrss?p=97211&u=f

The 5-digit number is your Zip Code and the "f" stands for "Fahrenheit" (change to "c" for "Celsius"). The information comes in XML format and it's up to you how you want to parse the data. Since the only bit of information we care about is the "yweather:condition" element's "text" attribute, We're going to avoid creating an XML parsing object and use a short regular expression.

Once the regular expression returns the yweather element's text, we'll use str_replace() and strtolower to format the string into a representative CSS class.

Step 3: Turning the weather information into an CSS class

Here is the PHP code:

<?php

        /* get xml, find match */

        /* get the weather from Yahoo */
        $data = get_data("http://weather.yahooapis.com/forecastrss?p=97211&u=f");

        $weather_class = format_result(get_match('/<yweather:condition  text="(.*)"/isU',$data));

        /* debug to see what we got back */
        //echo '<pre style="background:#fff;font-size:12px;">['; print_r($weather); echo ']</pre>';

        /* format the result */
        function format_result($input)
        {
                return strtolower(str_replace(array(' ', '(', ')'), array('-', '-', ''), $input));
        }

        /* helper:  does regex */
        function get_match($regex,$content)
        {
                preg_match($regex,$content,$matches);
                return $matches[1];
        }

        /* gets the xml data from Alexa */
        function get_data($url)
        {
                $ch = curl_init();
                $timeout = 5;
                curl_setopt($ch,CURLOPT_URL,$url);
                curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
                curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
                $xml = curl_exec($ch);
                curl_close($ch);
                return $xml;
        }
?>

Now we have a variable we can echo out that is representative of the current weather at the zip code we provided:

<div class="header header-<?php echo $weather_class; ?>">
        </div>

Step 4: Code your CSS for each of the classes

.header {
        width: 782px; height: 150px;
        /* DEFAULTS TO SUNNY */
        background: url(images/header-sunny.png) no-repeat center center black;
        }
        .header-rain {
                background: url(images/header-rain.png) no-repeat center center black;
        }
        header-snow {
                background: url(images/header-snow.png) no-repeat center center black;
        }
        .header-sunny, .header-fair {
                background: url(images/header-sunny.png) no-repeat center center black;
        }
        .header-partly-cloudy, .header-cloudy, .header-mostly-cloudy {
                background: url(images/header-partlycloudy.png) no-repeat center center black;
}

Step 5: Extending the idea

Notice that we use the "partlycloudy" graphic for the weather conditions of "partly-cloudy", "cloudy", and "mostly-cloudy". It's up to you how specific you want to get. Here is a full list of the possible weather conditions from Yahoo!:

0       tornado1       tropical storm2       hurricane3       severe thunderstorms4       thunderstorms5       mixed rain and snow6       mixed rain and sleet7       mixed snow and sleet8       freezing drizzle9       drizzle10      freezing rain11      showers12      showers13      snow flurries14      light snow showers15      blowing snow16      snow17      hail18      sleet19      dust20      foggy21      haze22      smoky23      blustery24      windy25      cold26      cloudy27      mostly cloudy (night)
28      mostly cloudy (day)
29      partly cloudy (night)
30      partly cloudy (day)
31      clear (night)
32      sunny33      fair (night)
34      fair (day)
35      mixed rain and hail36      hot37      isolated thunderstorms38      scattered thunderstorms39      scattered thunderstorms40      scattered showers41      heavy snow42      scattered snow showers43      heavy snow44      partly cloudy45      thundershowers46      snow showers47      isolated thundershowers

For this example, you'll notice we also used a hard-coded zip code that must be changed in the PHP in order to change where the website will be basing it's weather appearance on. But wouldn't it be cool if the website knew the zip code of your visitors and would change the appearance of the site based on their weather instead ofyour weather? That kind of coding requires services and expertise beyond the scope of this tutorial, but a quick Google search brings up some services that could probably make this happen like IP2Location.

Have fun! - and let me know if anyone actually uses this, I'd love to see what you did with it.