Skip to content

Latest commit

 

History

History
162 lines (111 loc) · 7.5 KB

README.md

File metadata and controls

162 lines (111 loc) · 7.5 KB

Savvy Chef

A Recipe Generator

Visit the Site

Cleck Here to Visit the Deployed Site

Description

Savvy Chef is a web application that helps you find recipes based on the ingredients you have on hand. With its intuitive interface, you can easily search for ingredients and add them to your list. The app then uses a Spoonacular API to suggest recipes that match your ingredient list. You can also filter the recipe results based on food intolerances, dietary restrictions, price sorting, and cuisines. Savvy chef also uses the CocktailDB API to generate delicious and unique cocktails. Savvy Chef eliminates the hassle of meal planning and helps you cook delicious meals with the ingredients you already have in your kitchen.

This app was created to address the common problem faced by users who struggle to come up with meal ideas or recipes based on the ingredients they have available at home. By providing inspiration and direct recipes tailored to individual ingredients and dietary preferences, and other criteria, the app aims to make cooking easier and more accessible for its users.There are a ton of great recipe sites that offer all kinds of filters. There are also recipe sites built around ingredient lists you feed them. But our site combines the vast filtering options with the ability to filter even further with ingredients you want to include. You can also quickly pair a cocktail with your meal.

Technology Used

User Stories

  • As a waste-conscious person , I want to filter recipes based on ingredients I already have
  • As a busy person , I want to filter recipes based on prep time
  • As someone who enjoys alcohol, I’d like to receive beverage suggestions
  • As someone who has a food intolerance, I want to filter out recipes that would cause me problems
  • As someone you is a foodie, I want to filter for recipes based on cuisine type
  • As someone who is on a specific diet, I want to be able to search recipes based on diet type
  • As someone who is cost-conscious, I want to sort recipes from least to most expensive

Usage

  1. Start typing in the "add ingredients" search box to find the ingredient you want.
  2. Press enter or click the ingredient from the suggestion list.
  3. The ingredient is now populated in the "current ingredients" list, but you can remove it by clicking the "x" next to it.
  4. Once you have selected your desired ingredients, you can choose any filters you would like to apply to your recipe search. Pick as many as you would like, but you can only pick one type of diet and one type of cuisine at a time.
  5. Once you are satisfied with your selections, click the "get recipes" button at the bottom of the page.
  6. You will be shown recipes that meet your criteria. You can save recipes to your "saved recipes" page by clicking the "save" button next to the image.
  7. If you want a random cocktail suggestion, click the "I want a drink" button to the right of the "get recipes" button.
  8. If you would like to see your saved recipes, click on the "saved recipes" button at the top of the page. You have the option of clearing your saved recipes.

Alt Text

Bulma was used for the CSS framework. Bulma is a mobile-first framework tool that utilizes Flexbox. We used Bulma for our page layout and intuitive responsiveness. The site is responsize to smaller screen sizes (shown below)
Alt Text

The app calls two third party API (Spoonacular & CocktailDB) can be seen in console Alt Text

Code Highlight

I wanted to highlight this code snippet because this code is by far the most complex api search any of us have done. sets an event listener for the button with ID "get-recipes". When the button is clicked, it makes an asynchronous API call to the Spoonacular complexSearch endpoint, using the parameters created in the preceding lines of code. The API URL is constructed by concatenating the various parameters together. One cool thing about this code is the use of template literals to create the URL string in a more readable and efficient way. Another cool thing is the use of the ternary operator to add optional parameters to the URL only if they are present.

 var getRecipesButton = document.getElementById("get-recipes");
  getRecipesButton.addEventListener("click", async function () {
    resultsContainer.style.display = "";
    cocktailButton.classList.add("is-4");

    var selectedIngredients = selectedItems.join();

    var spoonacularApiKey = "2e39a525784f4df6bc533d1a0e3e2403";

    var intolerancesParam =
      intolerances.length > 0 ? "&intolerances=" + intolerances.join(",") : "";

    var dietsParam = selectedDiet ? "&diet=" + selectedDiet : "";

    var maxReadyTimeParam =
      selectedMaxReadyTimes.length > 0
        ? "&maxReadyTime=" + Math.min(...selectedMaxReadyTimes)
        : "";

    var cuisineParam = selectedCuisine ? "&cuisine=" + selectedCuisine : "";

    // Constructed the full API URL for the Spoonacular complexSearch endpoint
    var apiURLspoonacular =
      "https://api.spoonacular.com/recipes/complexSearch?includeIngredients=" +
      selectedIngredients +
      "&number=10&addRecipeInformation=true" +
      intolerancesParam +
      maxReadyTimeParam +
      dietsParam +
      cuisineParam +
      "&apiKey=" +
      spoonacularApiKey;

Learning Points

  • Furthered knowledge of local storage, saving and retrieving
  • Learned how to use the .map, .some, forEach methods
  • Furthered our knowledge of server side apis
  • Learned how use Bulma
  • Learned about input type:radio
  • Learned how to use api documents to create a complex api call
  • learned how to make complex searchs on apis

Authors Info

Matthew Gibson

Christopher Daniels

Didrik Lindberg

Credits

meyerweb.com (For my reset.css file)

mdnwebdocs.org (.some)

mdnwebdocs.org (.map)

mdnwebdocs.org (forEach)

mdnwebdocs.org (.some)

License

License: MIT