egroene/desserts-api

JS DOM-Manipulation Project

desserts-api

This was a project I completed as part of the Devslopes Web Academy. I was to use only HTML, CSS, & vanilla JS, & the purpose was to practice manipulating DOM elements, in that the user can add items that display from an API call, back and forth from the homepage & a separate collection, as well as sort the items alphabetically & reverse-alphabetically by the 'name' property of their respective API object, & see a tally of items in the displayed collection that have a certain characteristic, defined in the API.

Here's a complete list of 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, 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 & 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 & 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 & "favorites" list alphabetically (A-Z) * 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 & 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, tablets, & mobile phones.