JavaScript RSS Feed Reader Project

Hosted Project

JavaScript Feed Reader Project (Hosted on Github Pages)

Source Files

https://github.com/JS-Beginners/rss-news-feed-project (Hosted on GitHub)

Project Objective

This JavaScript feed reader project's objective is to grab an RSS feed from BBC News or another feed and then display it on your web page.

JavaScript Used

• addEventListener()
• fetchAPI()
• Date()

My Personalize Summary

This project was tough. Not because the project itself was difficult, but because the project specifications required using some sort of feed reader to fetch content from a RSS feed.

Normally, when you fetch content from a web page you can use JSON, which turns the content into an object.

However, the problem with this project is I had to find a way to covert XML data that came from an RSS feed into a JavaScript Object.

In the past, you could use the Google AJAX Feed Reader API to fetch this information, but it has been discontinued.

So, I searched until I found Feednami's Feed Reader API solution.

Afterwards, it was just a matter of putting my RSS's url into the script and then manipulating the data from the object to have it show onto the web page.

New Things Learned or Refreshed

The biggest thing I learned is not actually shown in my project code.

But, I learned it in my quest to manipulate the data coming from the JavaScript feed object.

I learned how to get a selected value in a dropdown list using JavaScript.

The solution came from StackOverflow user Paolo Berganino.

If you have a select element that looks like this:

<select id="ddlViewBy">   
  <option value="1">test1</option>   
  <option value="2" selected="selected">test2</option>   
  <option value="3">test3</option> 
</select>

Running this code:

var e = document.getElementById("ddlViewBy"); 
var strUser = e.options[e.selectedIndex].value;

Would make strUser be 2. 
If what you actually want is test2, then do this:

var e = document.getElementById("ddlViewBy"); 
var strUser = e.options[e.selectedIndex].text;

Which would make strUser be test2. 

So, what I learned was to traverse information within a select list, you have to do somewhat of a “double” traversal.

The first to get the element you want and the second to traverse down to the value you want.

Time to Code

This project took me about four hours to complete on my own given the extension research involved.

Your Turn!

What To Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js file.
3. Implement the JavaScript code in your own app.js file.
4. If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this JavaScript Feed Reader Project in action.

Need to see the video solution for this project**?

**The video solution for this project will not work because it uses Google's deprecated AJAX Feed Reader API.

Need to see the video solution for this project? Get Bluelime's JavaScript for Beginners: Create 27 Projects from Scratch Course Now!