-
Upon opening the site, the user is greeted with a landing page that features a randomized image from a curated list of relevant pictures.
-
The user can search for new recipes by typing in the search bar and choosing to search by either Food or Drink.
-
The search results then display on the page as recipe cards. Each card includes an image of the finished recipe, the relevant information for how to make it themselves, and a save button.
-
When the user clicks the save button on a recipe card, that recipe's information is saved to the user's local storage. They can click the save button again to remove that recipe from their saved list.
-
The My Recipes page, linked in the navigation bar, use the user's local storage to display only recipes that the user has saved. The page features a Table of Contents that the user can click on to navigate to a specific recipe more easily.
-
As an alternative to searching, the user can click the Randomize button in the navigation bar on any page to display a random recipe.
Languages: HTML; CSS; JAVASCRIPT
Framework: Pure CSS
Images: Unsplash Source
Third Party API:
🌮 TheMealDB --- An open, crowd-sourced database of recipes from around the world.
🍸 TheCocktailDB --- An open, crowd-sourced database of drinks and cocktails from around the world.
