food_choices's Introduction

Foodly

Description

It's not alwasys an enjoyable experience to hunt for food recipes, especially if you have a limited number of ingredients available on hand. It can be worse, when you have dietary restrictions.

This application provides users with food recipe choices based on their selection of what they would like as ingredients and what they would like to exclude.

User Story

AS A User with Dietary restrictions
I WANT to provide a list of ingredients
SO THAT I can get recipe ideas

Acceptance Criteria

GIVEN that a user has started to enter an ingredient in the 'I want' field
WHEN the user starts to type
THEN the ingredient name is autocompleted with suggestions

GIVEN that a user has started to enter an ingredient in the 'I dont want' field
WHEN the user starts to type
THEN the ingredient name is autocompleted with suggestions

GIVEN that a user has entered ingredient choices
WHEN clicks on the 'Get My Recipe' button
THEN user should be presented with recipe choices.

GIVEN that a user has been presented with recipe choices
WHEN the user is viewing the resulting recipes 
THEN the recipes should be presented in cards

Wireframes

Screenshot

APIs

Design Framework

Materialize

Roles

🎨 Frontend Developer/Designers:

🧑🏽‍💻 Backend Developers:

👨‍💼 Product Owner:

Terence Chaney

🛠 DevOps Engineers:

🥸 Quality Assurances:

Project Member Legend

ID	Name
A	Celeste Moore
B	Terence Chaney
C	Cesar De La Portilla
D	Mohammed Ottun

food_choices's People

Contributors

Stargazers

Watchers

food_choices's Issues

Make 'favorites' icons that store individual card data to localStorage.

Append 'favorite' cards data to favorites.html bottom div.

Render API Data as page content

API Data collected from the requests need displayed in the HTML elements generated on the page(s).

Create 'return' button in favorites.html that sends user back to Foodly page.

Generate page elements in JS to be used on the page

Get API responses to switch out when different buttons are clicked.

When user hovers over the card
Then the modal window will pop-up pop
and the transparent box with larger title
and the recipe text is displayed with larger text
and the recipe picture is displayed larger
and nutritional facts or whatever.

Hide the card container until a search is performed

Create the 'I want' input component

GIVEN that a user has started to enter an ingredient in the 'I want' field
WHEN the user starts to type
THEN the ingredient name is autocompleted with suggestions
WHEN the user clicks on the suggestion
THEN the suggested ingredient is added to the 'I want' field
WHEN the user starts to type in the 'I want' field
THEN ingredient suggestions should appear
AND user should be able to add more ingredients to the 'I want' field

Test APIs

What to do to test APIs

Make icon at top of Foodly page that links to favorites.html

Create the 'I don't want' input component

GIVEN that a user has started to enter an ingredient in the 'I don't want'
field
WHEN the user starts to type
THEN the ingredient name is autocompleted with suggestions
WHEN the user clicks on the suggestion
THEN the suggested ingredient is added to the 'I don't want' field
WHEN the user starts to type in the 'I don't want' field
THEN ingredient suggestions should appear
AND user should be able to add more ingredients to the 'I don't want' field

Recommend Projects