DecisiveKitchen

Description: The Project

• Our goal was to create a simple recipe finder that will find recipes with nutritional facts based on the user's search criteria.
• The user can search by ingredients or area using a drop down menu.
• All requested recipes are saved for the user on the Saved Recipes page for future reference.

Table of Contents

• The project repository: https://github.com/calebkw91/DecisiveKitchen
• The README.MD file with all the instructions: https://github.com/calebkw91/DecisiveKitchen/blob/main/README.md
• The index.HTML and savedRecipes.html files contain the HTML codes: https://github.com/calebkw91/DecisiveKitchen
• The ASSETS folder contains:
  • The JS folder with the script.js and savedRecipes.js files. These files contain all of the functionality of the pages: https://github.com/calebkw91/DecisiveKitchen/tree/main/assets/js
  • The CSS folder with the style.css file. This file is linked to the HTML file: https://github.com/calebkw91/DecisiveKitchen/tree/main/assets/css
  • The IMAGES folder with all the images: https://github.com/calebkw91/DecisiveKitchen/tree/main/assets. This folder also contains all screenshots.

Current Status and Updates

• Created the file and folder structure of the website using Git Bash.
• The HTML coding was written for both the index.html and the savedRecipes.html pages
  • A navbar, a hero element, and a search bar were added.
  • Linked the images to the style.css and index.js files to our HTML file.
  • Custom DeciciveKitchen logos were added to create a better user experience.
  • An Event listener was added to our HTML file to capture the user's choice.
  • The saved recipe page organizes the recepies in dropdown cards.
• The appearance of the page was modified in the style.css file.
• The index.js file was created linked to the main page
  • The https://www.themealdb.com/api.php was linked first.
  • A function was created to allow searching by ingredients.
  • Another function was created for searching by regional cousine.
  • The https://developer.edamam.com/edamam-nutrition-api was linked.
  • The functions for nutrition amount was added
  • The nutrition DOM was added with if/else statements
  • The split recipe function was added.
  • The function was created to push nutrients to the HTML file.
  • Save recipe function was created with if/else statements.
  • The function was created to embed Youtube video of recipes.
• The savedRecipes.js was created and linked to the main page.
  • Load recipe function was created with if/else statements.
  • Find recipe ID function was added
  • The div classes were created in the js file to populate recipes in the HTML file.
  • The event listener was added to create a dropdown card in the savedRecipe.HTML.

Installation

• Go to the repository page by following the link: https://github.com/calebkw91/DecisiveKitchen
• Clone the repository using the "git clone" command in the command line.
• Open the files in visual studio code using the ". code" command in the command line.
• The web page can be accessed using this link: https://calebkw91.github.io/DecisiveKitchen/

Acknowledgment

The project was created by using:

• Visual Studio Code
• Git Bash
• GitHub
• Bulma
• Google Fonts
• Moment.js
• The Meal DB
• Edamam Nutrition API
• Canva