Merch: merch item cards

[spookycutie08]

USER STORY

As a user, I want to be able to purchase band merchandise on the site

AC

WHEN the Merch page loads THEN I should see bootstrap cards with items for sale AND there should be at least 9 different items AND there should be three per row AND the cards should display an image of the item AND below the image, a description of the item should appear, and the price (in USD) AND a button should appear below the description, labeled "BUY"

DEV NOTES

• use this bootstrap card:

  <div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
  <h5 class="card-title">Card title</h5>
  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  <a href="#" class="btn btn-secondary">Go somewhere</a>
  </div>
  </div>

• create an array called merchItems with 9 Objects like:

  {
  imageUrl: "image.jpg",
  item: "t-shirt"
  price: "$15"
  }

• create a container div called store-container for merchandise cards to print into
• create a function makeMerchCards and loop through the merchItems array with printToDom to create the item cards and display them inside the container div
• inside the makeCards function, assign unique id to each "BUY" button on the cards, for use with eventListener (for the cart)

[zoeames]

can we be more specific with this function name - makeCards? Many tickets are making cards. maybe something like makeMerchCards?