Cocktail Hour

The purpose of this project is to help out the fellow cocktail lover and newbie mixer alike find cocktail recipes in a pinch. Using the CocktailDB API and Pixabay API, the user is given recipes and instructions of how to make cocktails, accompanied with a pretty picture for reference.

User Story

• AS a cocktail lover

• I WANT to find a cocktail recipe

• SO THAT I can get the ingredients needed and recipe to make a cocktail in a pinch

• WHEN I enter a cocktail into the cocktail search field

• THEN I see a list of cocktails with their ingredients

• WHEN I enter an ingredient into the ingredient search field

• THEN I see a list of cocktails I can make with said ingredient

• WHEN I click on the cocktail

• THEN I am given the recipe for said cocktail

• WHEN I input anything into the search fields

• THEN my searches are kept in the search history

• WHEN I click on my search history

• THEN I can go back to a previous search

Description

If the user has an idea of the type of cocktail they would like to make, they can type the name of said drink in the input and they are then led to a page of recipes as well as instructions on how to mix it up. If the user has an ingredient they would like to make a cocktail with, they are given drinks they can make with said ingredient. Each search is then recorded in the local storage, and inputted on the page as search history buttons for the user to reference later. Cheers!

Getting Started

Required program(s) needed is any common internet browser with Javascript enabled in said browser (most browsers already have them installed and enabled).

Execution

• Once on the landing page, the user is given two input boxes. One to search by cocktail name and another to search by ingredient name
  • To search by cocktail name, the user will then input the cocktail name they would like recipes for. For an example, we will use Margarita
    • If the user has a typo or inputs a cocktail not included in the database, they will recieve an error message
  • If the cocktail inputted (i.e. Margarita) is valid, they will then be led to the search page where they are given several different margarita recipes, including the ingredients needed, amounts, step-by-step process of making said cocktail, as well as a picture for reference.
  • The cocktail searched will then be shown on the left sidebar as a button. If the user searches for a new cocktail, the new cocktail search will also be inputted in the search history. All searched drinks can be pressed to go back to that search.
  • To search by ingredient name, the user will input an ingredient in the form. For an example, we will use orange.
  • If the ingredient inputted is valid, the user will then be led to the search page where they are given different drinks that can be made with the searched ingredient. Within the cards, are the cocktail names, which can be clicked to reveal the cocktail recipe card.
  • The ingredient searched will then be shown on the left sidebar as a button, just like the cocktails. Both ingredients and cocktails searched will be inputted in the search history for future reference.
• To read about the developers, on the search page footer the user can find a link that leads them to an "About Us" page that has details of each dev that put work into this application
• To contact the project manager, there is a contact link in the footer to be led to an email if the user has any questions
• To find credits, on the search page footer the user can find a link that leads them to a "Credits" page
• To find the GitHub repo of this project, it can be found on the search page footer as well

Where to find Cocktail App

The app can be found here: https://lyssg2.github.io/cocktail-hour/

Screenshot

Authors

Alyssa (Lyss) Garcia

Justin Meredith

Robert Sternik

Megan Teubner-Foster

Version History

• 0.1
  • Initial Release