The web is an ever growing medium and it is getting more and more difficult to filter useful information. In our journey to writing beautiful JavaScript we have come and will come across a great many reference points that will guide our learning. This is where personal feeds come in very useful. Online feeds are like to-do lists in that they can be infinitely personalized and there is not one solution that works for everybody.
Our feed reader will pull feeds from our favorite news sources and blogs. The user will be able to filter between publications through the dropdown on the header menu. Clicking/tapping on one of the articles will load a pop up with more information. The user from that point will be able to either dismiss the additional information or go to the referenced article.
This will be our first single page app. All of our application views will be contained in the provided index.html file. Our task, after we pull from the respective feed APIs, will be to toggle the appropriate classes and content for the provided site architecture.
Give the user the ability to pull from a multiple news sources. Here are several sources we suggest:
You should also feel free to use other news APIs; however, you will find that many APIs that do not support either CORS or JSONp will result in a cross-domain restriction error (No 'Access-Control-Allow-Origin' header is present...
) in the browser. To get around this, you can use the following proxy server to filter your API requests.
Let's say you wanted to use the Digg API, which has the following endpoint:
http://digg.com/api/news/popular.json
If you preface the request with the proxy server API as follows...
https://cors-anywhere.herokuapp.com/http://digg.com/api/news/popular.json
...you should be able to use the Digg API without encountering a cross-domain restriction error. Here's a code example of how you might use the proxy server:
$.get("https://cors-anywhere.herokuapp.com/http://digg.com/api/news/popular.json", function(results) {
console.log(results);
results.data.feed.forEach(function(result){
$('ul').append('<li>' + result.content.title + '</li>')
});
});
If you use your own feeds, they must have APIs with the following minimum requirements:
Because some popular APIs don't include all of this data, though, you may need to get creative. Feel free to talk with your instructor about ways to make up for missing data.
#main
container with that of the API. The DOM structure of each article must adhere to the .article
structure.
#popUp
overlay. The content of the article must be inserted in the .container
class inside #popUp
. Make sure you remove the .loader
class when toggling the article information in the pop up.
.active
class for the #search
container. If the search input box is already expanded, tapping the search icon again should close the input. Pressing the "Enter" key should also close the opened input box. See Bonus 2 for search filtering functionality.
#popUp
container with the .loader
class. You can toggle the .hidden
class from the container to display/hide the overlay container.
Begin by forking the starter code repository. You can do so by clicking the "Fork" icon on the top right of this page. Once complete, click the "Clone or download" button on your fork of the repo, copy the link, switch to your terminal, navigate to your JSD
folder, type git clone
followed by a space, paste the link you copied, and then press return.
You can then open the Feedr
folder in your editor and work on the below steps. As you complete a feature, be sure to commit it in Git with the following commands:
git add .
git commit -m "A description of what was added"
git push origin master
console.log()
of the incoming feeds to confirm you have a successful transaction before you start mapping anything out.DUE DATE | MILESTONE |
---|---|
March 25 | Finalize list of APIs to use & read API docs |
April 1 | Working code for an API call that returns data from one of your news sources, and draft code to extract data and add it to the DOM |
April 8 | Completed project due! |
When your project is complete, push the final version to your fork on GitHub and send the link to Sasha. You do not need to create a pull request for this project.
If you'd like to schedule a 30-minute code review, let Sasha know. This is an opportunity for you to demonstrate your app and explain how you coded it, and for the instructional team to give you feedback on what you did well as well as things you might consider doing differently or adding for your future coding projects.
A code review is optional, so if you'd like to participate in one, it is up to you to contact Sasha to schedule it once your project is done.