Using a Fetch API…To Make Cocktails
Unlike most of those who have enrolled in Flatiron, I have programming experience (a B.S. in Computer Science), but I didn’t start learning Javascript until Flatiron. This blog is on my very first project with Flatiron, so let’s get into it.
PROJECT REQUIREMENTS:
THE API:
Programming requires putting many different pieces of code together in unique ways, in order to make a good app. The same is true with making cocktails, as you need all the right ingredients to make it!
The open API I decided on was the TheCocktailDB API. This API has multiple ways to access it’s information (as well as lots and lots of data for each cocktail), but for the sake of simplicity, the only one that I used was the “search cocktail by name” option.
THE OVERALL PROJECT:
So, what is this app? Well, ignoring the aesthetics:
The overall idea of this page is to be used to look for cocktails and their ingredients.
After typing something into the text field, clicking the Search button will generate a table of all cocktails in the API’s database that “loosely” matches the search. The table rows will contain the cocktail’s name, image, if it has alcohol, and a list of the ingredients. Searching for something new will generate a brand new table.
THE CODE:
In the code, I added 3 Event Listeners, one of which I won’t talk about here:
- SUBMIT:
The “submit” Event Listener allows invoking the tableSubmit function, which takes whatever has been typed into the text field (gives an alert if nothing is in there), and that “filter” is used to create the URL that is used to fetch the data for the table.
- CHANGE:
The “change” Event Listener, simply put, keeps track of the current value of the text field, which gets used as part of the URL used to generate the table.
THE loadTable FUNCTION:
The loadTable function, summed up, is the umbrella function for deleting and generating the tables of search results, but that isn’t all that it does! It also creates an Array of Objects(the drink Object), which are then used to populate the tables.
Because the entirety of the data fetched from the URL was in an Array of Objects, I needed to use a for loop to grab the correct data for each cocktail. Before pushing the contents of the ingredients Array inside of the drink Object, there were 2 things needed to be done with the data fetched from the API:
- Filter the Array so that only actual ingredients would get pushed.
- Add a space before each ingredient.
Because of this, when the table gets generated, the Ingredients column would list only the ingredients, without the “null” and empty spaces. The ingredients would also be listed in a grammatically correct fashion.
CONCLUSION:
So, I don’t believe that I will be working on this any further. This was the Phase 1 Project, so it is far from being all that complex. Here is a screenshot of the app searching for “margarita”:
