PROJECT 2: FEEDR

Feed Sources

Give the user the ability to pull information from multiple sources. Here are several sources we suggest (please note APIs with a 🔑 require an API to be set up):

NEWS

• Reddit: https://www.reddit.com/dev/api
• The Guardian: https://open-platform.theguardian.com/access/
• Hacker News: https://github.com/HackerNews/API
• Daily WTF: https://thedailywtf.com/articles/tdwtf-api
• Event Registry: https://eventregistry.org
• newsapi.org(republishes a number of news sources) https://newsapi.org

SCIENCE

• SpaceX: https://docs.spacexdata.com/?version=latest
• NASA API: https://api.nasa.gov/ 🔑

FOOD & DRINK

• Beer: https://www.brewerydb.com/developers 🔑
• The Cocktail API: https://www.thecocktaildb.com/

ENTERTAINMENT

• The Movie DB: https://www.themoviedb.org/documentation/api 🔑
• Star Wars: https://swapi.dev/
• Rick and Morty: https://rickandmortyapi.com/documentation/#rest
• Tvmaze: https://www.tvmaze.com/api

OUTDOORS

• Weather: https://openweathermap.org/api 🔑
• The Hiking Project Data API: https://www.hikingproject.com/data 🔑
• Pokemon: http://pokeapi.co/

OTHER OPEN APIs

• Giphy: https://developers.giphy.com/ 🔑
• Card Deck: https://deckofcardsapi.com/
• Chuck Norris: http://www.icndb.com/
• The Cat API: https://thecatapi.com/
• The Official Joke API: https://official-joke-api.appspot.com/random_ten
• The Meal API: https://official-joke-api.appspot.com/random_ten

---

You should also feel free to use other news and information 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 Cocktail API, which has the following endpoint:

https://www.thecocktaildb.com/api/json/v1/1/random.php

If you preface the request with the proxy server API as follows...

https://cors-anywhere.herokuapp.com/https://www.thecocktaildb.com/api/json/v1/1/random.php

...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/https://www.thecocktaildb.com/api/json/v1/1/random.php", function(results) {

	console.log(results);

	results.drinks.forEach(function(result){
		$('ul').append('<li>' + result.strDrink + '</li>')
	});

});
					

If you use your own feeds, they must have APIs with the following minimum requirements:

• Each fact must provide an image source for the circular thumbnail at the left of the article.
• Must provide either a category, tag to display below the title (of course title of article is also required).
• Must provide a point, ranking, or some type of total impressions for the respective article.
• Must provide either a full version or a summary of the article for the pop up screen.

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.

Feed Goals

1. When the application first loads, it should display the loading container (see below on instructions to toggle this). When you successfully retrieve information from the default API, the app should hide the loader and replace the content of the #main container with that of the API. The DOM structure of each article must adhere to the .article structure.
2. When the user selects an article's title, the app should show the #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.
3. Change the link of the "Read more from source" button to that of the respective article.
4. When the user selects a source from the dropdown menu on the header, replace the content of the page with articles from the newly selected source. Display the loading pop up when the user first selects the new source, and hide it on success.
5. Add an error message (either alert or a notification on the page) if the app cannot load from the selected feed.

Additional UI Interaction Goals

• When the user clicks/taps the search icon, expand the input box. The best approach for this is to toggle the .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.
• When the app is first loading and when the user selects a new feed to load from the dropdown, display the #popUp container with the .loader class. You can toggle the .hidden class from the container to display/hide the overlay container.
• Add functionality to hide the pop-up when user selects the "X" button on the pop-up.
• Clicking/tapping the "Feedr" logo should display the main/default feed.

Bonus

1. Merge all feeds into one main feed in chronological order for the initial view. When the user clicks/taps the "Feedr" logo at the top, they should be returned to this feed. This will be the new "home view."
2. Filter feed by title according to user keyboard input on the search input box. This should run the filter on every keystroke. When the input box is cleared, all articles should display in the respective feed.
3. Add infinite scrolling. Start displaying only the first 20 articles and keep loading more on user scrolling.

Getting Started

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