The main function of this site is to help users search for randomized recipies and cocktails.
The user has the ability to choose a specific type of cuisine that they would like from a dropdown menu,
and the Recipe Helper would populate 20 different choices that the user could cycle through.
The user also has the option to select a randomized cocktail to pair with their recipe of choice.
This is done using two different API's; Edamam , and CocktailDB
- Use a CSS framework other than Bootstrap.
- Be deployed to GitHub Pages.
- Be interactive (i.e: accept and respond to user input).
- Use at least two server-side APIs.
- Does not use alerts, confirms, or prompts (use modals).
- Use client-side storage to store persistent data.
- Be responsive.
- Have a polished UI.
- Have a clean repository that meets quality coding standards (file structure, naming conventions, follows best practices for class/id-naming conventions, indentation, quality comments, etc.).
-Have a quality README (with unique name, description, technologies used, screenshot, and link to deployed application).- Page loads
- Script pulls any saved data from storage and displays last shown recipe cards if present
- User enters a cuisine category into the form field
- The form field assists the user by autocompleting to valid entries
- User clicks on the meal button
- API call fills an array w/meal objects of the chosen cuisine from edamam
- A modal is presented to the user with information about a recipe
- The user may click "next" to view the next index in the array
- Clicking "Select" locks in the currently viewed recipe
- The selected recipe is stored in localstorage, overwriting any previous data
- The modal closes on clicking "Select" or clicking outside the modal
- User clicks on the cocktail button
- API call fills an array w/drink items
- Second API call to grab the first index in the array
- A card is presented with information grabbed in the second call
- The cocktail displayed is stored in localstorage, overwriting previous dataIn order to use this API, we used an async function to pull data from Edamam's API Endpoints using 3 different parameters;
Random:
Type:
CuisineType:
This is the function that was used to pull data from the Edamam API:
async function fetchMeal(){
let APP_ID = ""
let APP_KEY = ""
let TYPE = cuisineType
let response = await fetch ('https://api.edamam.com/api/recipes/v2?type=public&app_id=' + APP_ID + '&app_key=' + APP_KEY + '&random=true&dishType=Main%20course&cuisineType=' + TYPE)
if(response.ok){
let data = await response.json()
recipeData = data;
fillRecipeModal(0);
} else {
badResponseModal();
};
};The Request URL: https://api.edamam.com/api/recipes/v2?type=public&app_id=' + APP_ID + '&app_key=' + APP_KEY + '&q=' + '&random=true&dishType=Main%20course&cuisineType=' + TYPE
This API was very straight forward, as it only allowed one random search per call. Which means that if the user wanted to
try another recipe, they would have to make another API call request.
This is the function that was used to pull data from the CocktailDB API:
async function fetchCocktail() {
let API_KEY = "1"
let response = await fetch ('https://www.thecocktaildb.com/api/json/v1/1/random.php')
let data2 = await response.json()
cocktailData = data2;
resultCocktailDirectionsel.innerText = cocktailData.drinks[0].strInstructions;
resultSection.classList.remove('hide');
setCocktailIngredients();One issue we faced with the way CocktailDB presents it's data was that the ingredients list consists of 15 always present strings, strIngredient1 and so on, with blank ingredients as null entries.
To avoid cumbersome if statements in various spots we opted to write a single function "setCocktailIngredients" that used a push method to add all 15 strings to a single array and then used a filter to remove null entries from the array. We called this function right after the API call so that any functions or methods needing to reference the cocktail ingredients could do so via one simple array.
©2021 All Rights Reserved.