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.
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.
Search for a recipe
- 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
- Search for a recipe.
- Click on a recipe listed in the sidebar on the left side of the page.
Add a recipe's ingredients to your shopping list
- Load a recipe from the search results.
- 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
- 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
- Load a recipe from the search results.
- Click Directions. The original website containing the recipe will open in a new tab.
Add a recipe to your list of favorites
- Load a recipe from the search results.
- Click the heart below the recipe title.
View your list of favorite recipes
- Hover over the heart in the upper right corner of the page.