Javascript Weather Widget Using Yahoo Weather and Google RSS Reader

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.

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=""></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="">Colombo</option>
11. <option value="">Moratuwa</option>
12. <option value="">Negombo</option>
13. <option value="">Sri Jayawardenepura</option>
14. <option value="">Katunayake</option>
15. </select></td></tr>
16. <tr><td><script>
17. YW_CallWeather("");
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

You can find out this value for regions/countries that interest you by going to, 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.

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. /* 
 2.         Righteous Ninja
 3.         Free to use and modify.*/
 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.


Anonymous said...

Where and how dose one obtain a key?

Anonymous said...


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

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.
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.

Evelin Harriet said...

I have read your blog its very Interesting. Thanks for sharing. Call for low cost ERP software. ERP Software Providers in Chennai | ERP Software Solutions in Chennai

Evelin Harriet said...

I have read your blog its very Interesting. Thanks for sharing. Call for low cost ERP software. ERP Software Providers in Chennai | ERP Software Solutions in Chennai

Shivani Yuvanjalin said...

Thank you for this valuable information. I have got some important suggestions from it. I'm working in Brave Technologies Private Limited. We provides lowest price of ERP Software for our clients. Contact us on ERP Providers in Chennai

sivanesan said...

Nice post. Very interesting to read. Thank you for Sharing.
erp in chennai