
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 makestrUser
be2
. If what you actually want istest2
, then do this:var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;
Which would makestrUser
betest2
.
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
- Download the source code from the github repository above.
- Delete the contents of the
app.js
file. - Implement the JavaScript code in your own
app.js file.
- If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
- 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.
Leave a Reply