App Overview
This App will display recipes found on the internet that have been collected into a central database • Using the database API, a list of recipe search results can be retrieved by entering search keywords • A recipe can then be selected from the list in order to display recipe details with ingredients, cooking time and a link to the web site that originally hosted the recipe • Favorite recipes can be bookmarked for future reference • Recipes can also be input and uploaded to the central API database • Entered recipes will automatically be bookmarked
User Functionality
- Search Recipes
- • Enter keyword(s) in the search field to display a list of recipes, e.g. “pizza”, “pasta”, “onions”, etc.
- • View page(s) of results for various recipes
- View a Recipe
- • Select a recipe from results list to display recipe ingredients
- • Change number of servings as needed will change quantities of ingredients
- • Click <DIRECTIONS> button to go to to recipe origination website for further cooking instructions
- Add Your Own Recipe
- • Click <ADD RECIPE> button
- • Enter recipe input and click <UPLOAD> button
- • Recipe will be automatically Bookmarked
- Bookmark Favorite Recipes
- • Click <Bookmark> button
- View List of Bookmarks
- • Hover mouse over <BOOKMARKS> button
Coding Features and Methods Used
This App Uses Javascript Features Such As: • ES6 Modules • MVC Architecture & Publisher/Subscriber Pattern • Webpack Bundler • Recipe Database API - Query & Update • DOM State Updating Algorithm • Pagination of Search Results • Create and List Bookmarks to/from Local Storage • Async/Await Handling of Promises • Try/Catch and Re-Throwing Errors • Base and Sub Classes and Static Methods • Private and Protected Methods and Fields • Event Delegation for Elements not yet Created • Originally Designed Just for Desktop - Made Necessary Adaptations for Mobile Devices