The home of cocktail recipes
https://daisyeverard.github.io/Cocktail-Search/
Large Screen
Mobile (split into two)
Cocktail-Mix is a site for a bar of the same name which is used to search for cocktail recipes.
Features include:
-
Age confirm popup on load with Date of Birth input
-
If age is under 18, redirects to soft drinks webpage
-
If user has already entered age over 18, the popup hides itself on page reload
-
Search for a cocktail by name, or a work included in the name
-
Search by an ingredient name, a category of drink, or a combined search of these two parameters
-
Choose how many results (max) to return
-
User can only enter numbers between max and min value (1-5) in how many results input
-
Click the
?icon for an instructions popup -
Use the
randombutton to get a random recipe -
Clear Results button
-
Heart icon for each recipe to add it to a favourites bar (max 5)
-
Favourites buttons have a cocktail name, and take you to it on click
-
Clear favourites button
-
When the page loads, a modal pops up asking you to confirm you are over 18
-
Header with Logo and Title
-
Jumbotron with Header Image
-
Search Section with title and
?symbol to trigger a 'how it works' modal Search Parameters for: -
cocktail name
-
ingredient
-
drink category
-
number of drinks to return
Results Section, Each drink will have:
- a preview photo
- title
- ingredients
- recipe
- favourite button
Buttons bar with:
- Shake: run a search
- Random: give a random drink recipe
- Clear Results
- Clear Favourites
Footer:
- 'About us' style info about the bar
- links section
- Opening Hours
- HTML
- Bootstrap
- CSS
- FontAwesome
- JavaScript
- jQuery
- Git and Github
- Moment.js
- using API - TheCocktailDB
- Hani Ahmed @haniahmed98
- Clarissa Cole @RissaC2
- Angelo Silva @pandersail
- Daisy Everard @DaisyEverard
Please Note - Some members of our team were unable to attend all of the project sessions, so in some places there is an uneven balance of commits.
Hero image - Photo by energepic.com: https://www.pexels.com/photo/selective-blur-of-2-wine-glass-and-3-drinking-glass-110472/
Icon - Vitaly Gorbachev https://www.flaticon.com/free-icon/cocktail_3086535?term=cocktail&page=1&position=6&origin=search&related_id=3086535
cocktail shaker icon - Freepik
cocktail placeholder result image - Photo by Antonio Jose Meza Cárdenas: https://www.pexels.com/photo/blue-margarita-with-lemon-2480828/
MIT License