Skip to content

Latest commit

 

History

History
32 lines (23 loc) · 1.7 KB

README.md

File metadata and controls

32 lines (23 loc) · 1.7 KB

Forkify-Project

Check it out on Netlify. When I first finished the project, the UI rendered correctly, but since then there have been some UI bugs that I haven't fixed yet.

Background

A website that uses a recipe API to generate search results and load recipe instructions. You can also add recipe ingredients to a shopping list and track your favorite recipes using local storage. The HTML and CSS were provided by a Udemy course, but all of the JS is mine. I used Babel and Webpack for this project.

How to use the site

Search for a recipe

  1. In the search bar, type a keyword, like pizza, and click Search. A sidebar containing a list of recipes related to the keyword will appear on the left side of the page.

Load a recipe from the search results

  1. Search for a recipe.
  2. Click on a recipe listed in the sidebar on the left side of the page.

Add a recipe's ingredients to your shopping list

  1. Load a recipe from the search results.
  2. Click Add to Shopping List. The page will add the currently loaded recipe's ingredients to your shopping list.

Delete an ingredient from your shopping list

  1. Hover over an ingredient in the shopping list, and then click the orange x that appears. The page will remove the ingredient from the shopping list.

View recipe cooking directions

  1. Load a recipe from the search results.
  2. Click Directions. The original website containing the recipe will open in a new tab.

Add a recipe to your list of favorites

  1. Load a recipe from the search results.
  2. Click the heart below the recipe title.

View your list of favorite recipes

  1. Hover over the heart in the upper right corner of the page.