I had many ideas while at the drawing table trying to figure out what kind of application I wanted to build. It was overwhelming at first but I took a deep breath and started organizing my thoughts and ideas and found one that I stuck with. My girlfriend, which is a bartender had just recently started her own business and was looking for someone to build a website for her. I started researching cocktail/drink API'S and found what I was looking for. I clicked around and gathered the information that was on the API and got to work organizing what functions I wanted this site to do.
Once I found the API I wanted to use, I needed to have access to all the data on the site to start building my API. After linking my Javascript file through my index.html, I fetched all of the drinks from the public API, https://www.thecocktaildb.com/api/json/v1/1/search.php?f=a, and rendered the drinks to the page using DOM manipulation.
There was a lot of information in the array that would have cluttered my API, so I decided to create a function that would only pull certain information; the name of the drink, a picture, the alcohol used and the instructions. Once I refreshed the page, it started looking promising.
Now that I had the drinks and the information I needed on the page. I wanted to organize it even more, I wanted the user to have the option of not only seeing all the drinks on the page, they can also have the option to go strait to the alcohol of their liking. You like whiskey? great, theres going to be a button for that. Gin? guess what? theres a button for that. If theres any alcohol that you want to see recipes for, there will be a button for it.
To make a button I went to the html file and made a div class that would hold the buttons for each drink and then went back created a const that wound grab the button element, added an event listener and tied it to the filter drinks function that sorted through all the drinks and displayed all the drinks by the ingredient. now all there was left to do was to style it and add a like button.
Top comments (0)