Merch: filter button group

[spookycutie08]

USER STORY

As a user, I want to be able to filter items in the mech store by price

AC

WHEN the user clicks a button THEN the items that are appropriate for the filter will display

DEV NOTES

• create a bootstrap button group ABOVE the store-container div
• use this bootstrap code:

  <div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">All</button>
  <button type="button" class="btn btn-primary">Under $5</button>
  <button type="button" class="btn btn-primary">$5 - $10</button>
  <button type="button" class="btn btn-primary"> Over $10</button>
  </div>

• assign unique id names to each of the buttons
• create a function called filterItems
• inside filterItems create an empty array called myPrice
• inside filterItems create an if/else statement: if true: the button "All" is selected, calls the function makeCards and prints all of the items. The else statements should each loop through the array of merchItems and see if each item meets the criteria for price, and if so, adds that item to myPrice array, then calls the function makeCards with myPrice passed into it. (This should only print the filtered items to the DOM.)
• Example from Pies project:

  const findMyPies = (e) => {
  const buttonId = e.target.id
  if (buttonId === 'All') {
  pieBuilder(pies)
  } else {
  const myPies = [];
  for (let i = 0; i < pies.length; i++) {
  if (pies[i].instructor === buttonId) {
  myPies.push(pies[i]);
  }
  }
  pieBuilder(myPies);
  }
  };

[zoeames]

good