WireFrame Design

excalidraw

• Should bring in all information from a recipe object.

  • Unique id
  • image of food 'http string'
  • ingredients
    • id
    • quantity
      • amount
      • unit
  • instructions
    • instruction string
    • step number
  • name
  • tag [array of strings]

• should have methods:

  • determine the name of ingredients needed
  • get the cost of its ingredients
    • return the cost of ingredient * units needed???
    • how to know what the cost is per unit?(how much ingredient are you getting for the cost?)
  • return its directions/ instructions

flickety

For a carousel effect

Main

Rubric

This file will contain the data that we will need to pull into the test suites

• Should have multiple recipes
• Should have multiple users
• Should have multiple ingredients

• Web design should respond to the size of screen on the computer.

• Design for cellphones should be considered as well

• hamburger icon with smaller screen.

• search icon on nave bar to drop down search

• user should be able to save recipes
• a page should display to show favorite recipes
• a user should be able to remove recipes

Create a DTR with the following:

• Learning goals
• Schedules
• Expectations

• Test all properties

  • Unique ID
  • Corresponding image link
  • Array of ingredients{}
    • id
    • quantity {}
      • amount
      • unit
  • array of instructions{}
    • instruction
    • corresponding step number
  • name
  • tags

• Should test methods

  • Determine the names of ingredients needed
  • get the cost or ingredients
  • return the directions

• Test any changing properties

• start

• Properties

  • Should a Unique ID (number)
  • Should have a name (String)
  • Should have pantry (array or objects with ingredient id and amount)

• Methods

  • Should be able to add recipesToCook (save recipes to cook later)
  • filter Favorite recipes by one or more tags
  • filter Favorite recipes by its name or ingredients

• NYT
  A few things that I like about this design:

  • carousel recipes/images
  • box shadow on hover
  • increased picture size (slow transition )

• Design from Dribble

  • Carousel of recipe images, titles (DOM objects)
  • Includes time, portion size
  • Seems to fit generally well for the project, easy to make additions to design.

• [recipe cards] (https://dribbble.com/shots/13869707-Perfectly-Grilled-Steak/attachments/5477225?mode=media)

  • Good design for individual recipe cards, or even a list of saved recipe cards
  • Includes sections for ingredients and instructions, which fits in with our intended data model
  • Provides suggestions for other dishes to pair with it? Might be a feature to add...

Page loads outside of wanted clicks.

• test that it has id, name, cost in cents

• Should have a property that takes in recipe data and stores in an array (may be instances of Recipe
• Methods.
  • Filter based on one or more tags
  • Filter based on its name or ingredients

Basic structure should provide you with the ability to test class methods. Use script.js to manipulate the DOM

• Should have an area to view the recipes.
• Should have an area to view recipe details.
• Should have an input box.

• should have an id
• a name
• estimated cost in cents

All DOM manipulation will happen in this file.

• Should be able to view a list of all recipes (carousel??? or list???)
  • iterate through the recipe repository
  • Each recipe will have name
  • Each recipe will have image
• Should be able to click on the recipe for more information
  • View directions
  • View ingredients needed
  • View Total Cost
• Should have a search bar
  • Search by tags
  • Search by name
  • Search by ingredients

Card is too small to fit data

• expand card size
• header, directions and ingredients should have dedicated space
• button shouldn't move
• instruction card should be taller
• text should be consisted
• ingredients need to be spaced out more
• button shouldn't move

• Should have a parameter to take in recipe data (array)
• Methods
  • Filtered list of recipes based on one or more tags
  • Filter list of recipes based on its name or ingredients

Alignment issues between different text

• text align right
• button needs to be changed
• button and cost to be fixed to the bottom of the box