api-project

This is a project I'm working on for the Devslopes Academy. We are to implement an API using only HTML, CSS, & vanilla JavaScript. I will update this document further as needed.

I will be using only what I know at this point in time to accomplish the objectives below. I will eventually receive feedback from a mentor.

Here are the project requirements:

1. Fetch data from an API (resource provided below) and display up to 30 items from that request in your HTML.
   

• In your HTML you will display the array of data you get back (i.e. if it was an array of movies, you would display the list of movies).
  
• Display a minimum of 3 values from the object in the array of data you get back for each item. (i.e. movie name, movie description, cover image).

2. HTML for each item should be created programmatically. This means the html is created based on the data received from the API
   

• if 10 items are fetched, 10 blocks of HTML are created to display the data, etc.
  

3. Build a function to add selected items from the array of data to a "favorites" list. i.e.:
   

• You fetch a list of 30 movies from an API and display it in a "collection" in your HTML.
  
• When a user selects an item(s) from the "collection" to add to the "favorites" list, the item(s) are removed from the collection and added to the "favorites" list.
  

4. Build a function to remove an item from the "favorites" list.
   

• When a user removes an item from the "favorites" list, the item is added back to the "collection" of items.
  

5. Build a toggle function that sorts the items in the collection and "favorites" list alphabetically (A-Z) and vice versa (Z-A).
   
6. You must display the total sum of some piece of data from the list. (i.e. if you had a list of pokemon, you could total the number of common, rare and legendary pokemon in the list). You cannot total the number of items in the array, it must be a value from the data object.
   
7. The website must be built with pure HTML, CSS and JavaScript (no third party css or js libraries).
   
8. The items retrieved from the API must be displayed in styled HTML. (i.e. if you were working with the pokeAPI you could display the data in a "card" design with the image, attack, hitpoints, etc).
   
9. The website must be mobile responsive across desktop, ipad/tablet and mobile phones.