Javascript Weather Widget Using Yahoo Weather and Google RSS Reader

Description
The aim of this tutorial is to show how you can combine different services from different providers to create a rich, original and free widget. In this example we will use Yahoo's RSS Weather service along with Google's RSS Reader api to create a pure javascript weather widget. In this example the widget will display the weather in Sri Lanka. Sri Lanka is the birthplace of righteous.

View this widget

You can download the zipped example here.

HTML Code
First let us have a look at the html code
 1. <html>
 2. <head>
 3. <title></title>
 4. </head>
 5. <body style="margin-top:0px;margin-left:0px">
 6. <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAU34fqM8XohIf42U76GcxNhQD6263AO_J-cN-o5MVlTXsf8kbcBRgf8XZKHTaVeqWfZVYZJ5ub5dW3A"></script>
 7. <script type="text/javascript" src="weather.js"></script>
 8. <h2>Sri Lanka Weather</h2>
 9. <table width="100%"><tbody><tr><td><select onChange="YW_CallWeather(this.options[this.selectedIndex].value)">
10. <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0001&u=c">Colombo</option>
11. <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0002&u=c">Moratuwa</option>
12. <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0003&u=c">Negombo</option>
13. <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0004&u=c">Sri Jayawardenepura</option>
14. <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0005&u=c">Katunayake</option>
15. </select></td></tr>
16. <tr><td><script>
17. YW_CallWeather("http://weather.yahooapis.com/forecastrss?p=CEXX0001&u=c");
18. </script>
19. </td></tr></tbody></table>
20. </body>
21. </html>
Hide line numbers

line 6 Loading the google api with your key. Please substitute your key

Line 7 This is the javascript file.

Line 9 This has the onchange javascript handler that feeds the YW_CallWeather function with the Yahoo RSS feed for that region. In the case of Colombo, Sri Lanka, that value is
http://weather.yahooapis.com/forecastrss?p=CEXX0001&u=c

You can find out this value for regions/countries that interest you by going to weather.yahoo.com, selecting your region 'Australasia' then country 'Australia' then State 'Australian capital terrotory' then the county, 'Canberra.' now click on the orange RSS Icon on the right hand side for the URL.
http://weather.yahooapis.com/forecastrss?p=ASXX0023&u=f

This is how the drop down box is populated.


RSS Reader Script
Next we have to create the script that reads the RSS and allows us to manipulate the result. We will use google's RSS api for this.
 1. /*      scriptdiaries.blogspot.com 
 2.         Righteous Ninja
 3.         Free to use and modify.*/
 4.         
 5. google.load("feeds", "1");
 6. var YW_ContainerOk=false;
 7. function YW_GetWeatherResults(result){
 8.   if (!result.error){
 9.         s="<table  style=\"border-width:1px;border-collapse:collapse;border-style:solid;"+ 
10.       "border-color:#6D7B8D;width:1px;height:1px\" bgcolor=\"#ffffff\">"+
11.       "<tbody><tr>"+
12.       "<td>"+result.feed.entries[0].content.match(/<img .*?>/)+"</td></tr>"+
13.       "</tbody></table>";
14.     document.getElementById("YW_weather_container").innerHTML="<b>"+
15.     result.feed.entries[0].title+"</b><br/>"+
16.     result.feed.entries[0].content.replace(/<img .*?>/,s);
17.     }
18. }
19. function YW_CallWeather(hrf){
20.     if(!YW_ContainerOk){
21.         document.write("<div id=\"YW_weather_container\">There is no weather information available for this location at this time</div>");
22.         YW_ContainerOk=true;
23.     }
24.     (new google.feeds.Feed(hrf)).load(YW_GetWeatherResults);
25. }
Hide line numbers

Line 19 This is the function that gets called when a value is selected in the drop down box. This gets called with the yahoo rss url. We then use google's google.feeds.Feed to submit the url and give the name of the callback function YW_GetWeatherResults.

Line 7 YW_GetWeatherResults gets called with the result. We then use the result.feed.entries[0] object to access the various parts of the feeds and display the result in a div.

7 comments:

Anonymous said...

Where and how dose one obtain a key?

Anonymous said...

does*

Naviya Nair said...

Very interesting and good Explanation
ASP NET Training
ASP NET Training
ASP NET Online Training
C-Sharp Training
Dot Net Training in Chennai
Online .Net Training


MVC Training
WCF Training
Web-API Training
LINQ Training
Entity Framework
Training

Dot Net Interview Questions

Bay Max said...

.Net is most preferred programming language among software developers all over the world. It is also considered as most trusted and effective platform to build high performing desktop or enterprise application.Start to learn dotnet course.IT has great scope in future.
DOTNET Training in Chennai
| DOTNET course in Chennai

Jhon Mick said...

Hello Admin,
Technology is in a growing way, if you want to shine your career just try to learn a latest technology skill which is having great scope in future.
Regards,
JAVA Training|Best JAVA Training institute in Chennai|J2EE Training in Chennai

Rasool Bevi said...

Thanks for sharing such informative guide on .Net technology. This post gives me detailed information about the .net technology. I am working as trainer in leading IT training academy offering Dot Net Training in Chennai and i use your guide to educate my students. .Net Training in Chennai

Nusrat Borsha said...

Thank you for your kind information on weather widget free gadget. Can you please inform me if it is possible to use stations and instrument to measure wind speed connecting with desktop? If so, it will be a very helpful job for me.