jsills3110 / project-1

What's Cookin...? Recipe Search App

What's Cooking App

This is a Recipe App, that will allow for quick retrieval, editing and grouping of recipies. There are two api calls, one for the images, and another to retrieve the recipe. You can also save recipies and groups of recipies to your profile. Below are some of the tasks you can perform with the Recipe App.

• Search Recipe
• Edit Recipe
• Suprise Me
• Add to Deck
• Add to Group
• Sign Up
• Log in

### Searching Recipie

Below is an example of using the app to search for a recipe:

### Editing Recipie

Below is an example of editing a recipe:

Suprise Me

Suprise me is a random recipe topic lookup. Below is an example of it being used:

Add to Deck

Add to Deck gives you the ability to save recipe to the bottom of your deck, to be able to be easily retrieved at a later point in time. Below is an example of this functionality:

Add to Group

Add to group allows groupings of recipies. For example if you need to prepare a dinner, you can have multiple dishes, and retrieve all those dishes to your deck if needed:

Sign Up

Sign up allows you to save recipe groups to be recalled at a later point in time from anywhere. Below is an example of how to sign up:

Login

Logging in allows you to recall saved recipe groups and edited recipies.

Usage

This project was completed using HTML, CSS, Javascript, JQuery, Bootstrap, and Firebase.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

project-1's Issues

Javascript add search results to document

###Task(s)

• Use jQuery to place search results into the document

Searching yields the same search results

Any ingredient or topic yields the same 10 search results.

Display Edited Recipe to the Page

Task(s)

• After a recipe has been edited and saved, re-display it to the page.

Javascript Image API

Task(s)

• Add an AJAX call that searches an API for images of a recipe

Spoonacular API Key

• Each individual needs to obtain their own API key from Spoonacular API
  https://spoonacular.com/food-api

• Javascript only use var apiKey in code and set var apiKey to blank. Users should set value of var apiKey each time they run code.

• Jessica

• Dima

• Abe

• Ray

Edit Recipe on Page

Task(s)

• Brainstorm ideas on how to accomplish editing the recipe on the page (look into Google Developers for perhaps a Google Doc API?)

Fix Search Bar Refreshing

Hitting "Enter" key on search bar refreshes the page.

Click Option to Add Recipe to Favorites

Task(s)

• As an alternative to dragging and dropping, give the user the option to click on a recipe and add it to a favorites group from a list

Javascript Expand search result

Task(s)

• Make search results clickable
• When a search result is clicked, append the recipe ingredients and directions (or url) to the viewport

Create Users

Task(s)

• Create a log in page
• Create users in the database
• create sing up page

HTML Create user deck

Task(s)

• HTML create a responsive horizontal scroll bar for the user deck

Create JSON object for each recipe

Task(s)

• Create a JSON structure for the searched recipes
• Modify app.js so that clicked recipes are stored in a JSON object for easy storage

Javascript Add Recipe to Favorites

Task(s)

• When the add favorites button is clicked, the recipe should be added to the corresponding favorites group

HTML for search results

Task(s)

• Create a div for the search results to be placed in.

Javascript Adding to Deck

Task(s)

• Clicking on a search result will add the recipe to the user deck

Basic Search Functionality

User Story

As a user, I want to be able to search for recipes.

Acceptance Criteria

• HTML search bar and search button
• HTML search results viewport
• Javascript AJAX call to Edamam
• Javascript jQuery post results to viewport

bug: recipes pulled from user deck cannot be edited

Image Search Returns Error Sometimes

Issue(s)

• On some flickr api searches, the following error is returned and no image is displayed:
  jquery.min.js:2 jQuery.Deferred exception: Cannot read property 'farm' of undefined TypeError: Cannot read property 'farm' of undefined
  at displayImage (file:///C:/Users/Jessica/OneDrive/Documents/UWCodingBootcamp/Project-1/assets/javascript/images.js:18:36)
  at Object. (file:///C:/Users/Jessica/OneDrive/Documents/UWCodingBootcamp/Project-1/assets/javascript/images.js:10:9)
  at e (https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js:2:29453)
  at t (https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js:2:29755) undefined

Add Recipes to the Database

Change recipeId in Favorites when a user edits a recipe

Task(s)

• When a user edits a recipe, the recipe gets a new ID that follows this pattern: -. This id needs to be updated in the user's favorites list, so that their edited recipe is displayed when they click on it, and not the unchanged spoonacular recipe.

add "surprise me!!" to get random recipe

Refine Search

Task(s)

• Give the user the ability to search by recipe type
• Give the user the ability to search by ingredients
• Give the user the ability to get more search results