Script Diaries: Lesson 2 - Weather and News Widget Using RSS Reader

Summary
This is lesson 2 of 4. For this example we will use Google's RSS feed API to decode rss feeds and display them on a site. This widget will display weather taken from Yahoo's weather RSS feed and local news taken from two selected newspaper RSS feeds. View this Widget !!!

Explanation
First let us have a quick look at the code. First let's have a look at the weather.js file.

 1. /*      scriptdiaries.blogspot.com 
 2.         Righteous Ninja aka Ping Ching.
 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\"><tbody><tr><td>"+
11.             result.feed.entries[0].content.match(/<img .*?>/)+"</td></tr></tbody></table>";
12.         document.getElementById("YW_weather_container").innerHTML="<b>"+result.feed.entries[0].title+
13.             "</b><br/>"+result.feed.entries[0].content.replace(/<img .*?>/,s);
14.     }
15. }
16. function YW_CallWeather(hrf){
17.     if(!YW_ContainerOk){
18.         document.write("<div id=\"YW_weather_container\">There is no weather information available "+
19.         " for this location at this time</div>");
20.         YW_ContainerOk=true;
21.     }
22.     (new google.feeds.Feed(hrf)).load(YW_GetWeatherResults);
23. }

Hide line numbers

Now let's have a look at the newsreader.js file

 1. /*      scriptdiaries.blogspot.com 
 2.         Righteous Ninja aka Ping Ching.
 3.         Free to use and modify.*/
 4.         
 5. google.load("feeds", "1");
 6. var NWS_ContainerOk = false;  
 7. function NWS_GetNewsResults(result){
 8.     if (!result.error){
 9.         for(i=0;i<result.feed.entries.length;i++){
10.             tmprs = result.feed.entries[i];
11.             document.getElementById("gansyman").innerHTML+="<a href=\""+tmprs.link+"\">"+
12.                 tmprs.title+"</a><br/>"+tmprs.content.substring(0,100)+"<br/>";
13.         }
14.     }
15.     else
16.         alert(result.error.message);
17. }
18. function NWS_CallNews(hrf, num){
19.     if(!NWS_ContainerOk){
20.         document.write("<div id=\"gansyman\"></div>");
21.         NWS_ContainerOk= true;
22.     }
23.     var feed = new google.feeds.Feed(hrf)
24.     feed.setNumEntries(num);
25.     feed.load(NWS_GetNewsResults);
26. }

Hide line numbers

Finally let us have a look at how you can embed this in an html page.

 1. <html>
 2.         <!--    
 3.         scriptdiaries.blogspot.com 
 4.         Righteous Ninja aka Ping Ching.
 5.         Free to use and modify.-->
 6. <head>
 7. <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA40MrnqI6U_ttOMK0wTpPSRQD6263AO_J-cN-o5MVlTXsf8kbcBRDZ3IoIMGa4lhUHoT28Z8OHamBhA"></script>
 8. <script type="text/javascript" src="weather.js"></script>
 9. <script type="text/javascript" src="newsreader.js"></script>
10. </head>
11. 
12. <body>
13. <h2>Weather</h2>
14. <table width="100%">
15.     <tbody>
16.     <tr>
17.         <td>
18.         <select onChange="YW_CallWeather(this.options[this.selectedIndex].value)">
19.             <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0001&u=c">Colombo</option>
20.             <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0002&u=c">Moratuwa</option>
21.             <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0003&u=c">Negombo</option>
22.             <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0004&u=c">Sri Jayawardenepura</option>
23.             <option value="http://weather.yahooapis.com/forecastrss?p=CEXX0005&u=c">Katunayake</option>
24.         </select>
25.         </td>
26.     </tr>
27.     <tr>
28.         <td>
29.             <script>
30.             YW_CallWeather("http://weather.yahooapis.com/forecastrss?p=CEXX0001&u=c");
31.             </script>
32.         </td>
33.     </tr>
34.     </tbody>
35. </table>
36. 
37. <h2>News</h2>
38. <script>
39. NWS_CallNews("http://www.dailymirror.lk/DM_BLOG/RSS/FrontPageRSS.xml",3);
40. NWS_CallNews("http://www.lankanewspapers.com/news/rss.xml",3);
41. </script>
42. 
43. </body>
44. </html>