Merch: Cards with img, description, price of merch

[delindell]

User Story:

When the page loads I want to see cards, printed from the domString, containing an image of the item, description and price.

AC:

WHEN the merchandise page loads THEN I should see all the merchandise AND all the merchandise should appear on individual cards AND the cards should appear three to a row

Dev Notes:

• In merchandise.html create <div> that contains an id="merchCards" and a class="d-flex flex-wrap"
• Create an array of items in main.js called merchItems that contains 3 objects of each item with the type album, tShirt, hat.
• Each object should include a type of merchandise, photo of the merchandise, size (if applicable), and a button to purchase the item.
• Create a merchPrinter function that takes in the merchItems, loops over the array and builds a domString that contains the image, title in <h2> tag, description, price and purchase button for the items in their own individual <p> tags. <div> container should have a class of merch-card col-4 and calls printToDom function.
• The purchase button should call a purchaseButton function that has an alert(). The alert() should say "This item has been added to your cart!"

[delindell]

Bootstrap card info:

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

[delindell]

[delindell]

Example object:

const merchItems = [{type: 'album', imgUrl: 'https://images.unsplash.com/photo-1566518447972-1fa5bbf1a909?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80', price: 5000}];