Shaken Up
A cocktail database search engine
This is my first full front-end project, assigned by Digital Crafts. It uses html, css, and javascript to make a cohesive site. The entire site is based around the API from TheCocktailDB, an extensive collection of cocktail objects. Each object has values like drink name, glass type, a thumbnail image of the cocktail, ingredients and their measurements, recipe instructions, and other values. The site I created calls a thumbnail and name of cocktails relating to a search input. Once the name of the cocktail is clicked, the user is redirected to a blank recipe page that is populated by the API by more information.
For the index page I decided to have a splash image and a selection of 5 featured cocktails. The featured cocktails are generated by a javascript event listener that calls a function to loop through a list of API ids and creates individual “cards” for each cocktail.
// Looping through the array of featured cocktails
const urlAndID = (array) =>{
let URLlist = []
for (let i=0; i<featured.length; i++){
const num = featured[i]
const newURL = "http://www.thecocktaildb.com/api/
json/v1/1/lookup.php?i=" + num.toString()
URLlist.push(newURL)
}
return URLlist
}
let URLlist = urlAndID(featured)The search page is accessed by the nav bar at the top of each page. The only item on the search page is a splash image with a search bar and button in the center of it. The search bar takes the users input and upon clicking “Search” returns individual cocktail cards for each result from the API search function.
The recipe page is only reached once the name of a cocktail is clicked. A similar cocktail card is shown with information that corresponds to the cocktail’s API id. The cocktail id is stored in local storage when the user clicks the cocktail name. Another function is called in javascript to create html elements, assign class names, edit values, and append the elements to the html document.
Finally the “about” page is a playground I used to learn a little more about CSS grids and media queries.
Get Peter Riesing’s stories in your inbox
Join Medium for free to get updates from this writer.
I set out to learn as much css as I could without using a framework tool. My styling file ended up being very long for such a small site (about 300 lines). In class we had already learned basics like resizing, orientation, and text manipulation. This project gave me the opportunity to learn about z-index and I was able to use it on the nav bar and overlapping images. Overlapping images gave me practice in grid templates. I used button styling to adjust the hover and cursor states to fit the design. The biggest hurdle was dealing with media queries.
Given more time I would have added much more content. That seemed to be my biggest overall struggle creatively. I would also consider adding another port to the API to perhaps search by ingredient or add filters to search results. Overall, I felt fairly comfortable with the javascript integration in this project which in the past had been something I stumbled on.
Check out the project Repo here: https://github.com/peterriesing/Peter---Digital-Crafts-Repo/tree/main/Projects/front_end_projects/Cocktail
