Product Page: Displaying Default Product Cards

[KeithRWalker]

User Story

As a user when I load the product page want to see a list of products (beer) available to purchase.

AC

WHEN The user loads the page they should see a collection of cards with products available to purchase. AND the cards should have a title, photo, two buttons, and a price. AND The cards should be displayed as a grid system, with the ability to change positions. (4 per row?)

Development

• Create printToDom(divId, txt) function. which should accept an container element id, and a string.
• Create an array named beerArray it should be a collection of objects representing the products (provided by team) they should have the following properties
  • name: 'string'
  • img: 'url'
  • abv: '10%'
  • description: 'string'
  • price: int
  • ing: ['array','of','strings','ingredients']
• create beerCardBuilder( ) function which has one input of arrayToPrint, and an empty string named stringToPrint
• inside beerCardBuilder( ) loop through arrayToPrint with forEach
• inside the forEach loop assign/add += the value of stringToPrint to be HTML/Bootstrap card with the information from the current object/beer's property values.
  • add two buttons inside the card to be used in later tickets (comment these out)
• after exiting the loop call the printToDom() function, and pass in the div id you are printing to, and stringToPrint.
• adjust the layout of the page to properly display the cards.

[KeithRWalker]

https://getbootstrap.com/docs/4.0/components/card/

[KeithRWalker]

[zoeames]

its fine to put the buttons in your string builder for now but leave those lines commented out until you get to the tickets that actually use them

[KeithRWalker]

its fine to put the buttons in your string builder for now but leave those lines commented out until you get to the tickets that actually use them

okay sounds good

[zoeames]

👍