Build a Music Instrument Filter : What is wrong in my code

JavaScript
1 
const instrumentsArr = [
  { category: "woodwinds", instrument: "Flute", price: 500 },
  { category: "woodwinds", instrument: "Clarinet", price: 200 },
  { category: "woodwinds", instrument: "Oboe", price: 4000 },
  { category: "brass", instrument: "Trumpet", price: 200 },
  { category: "brass", instrument: "Trombone", price: 300 },
  { category: "brass", instrument: "French Horn", price: 4300 },
  { category: "percussion", instrument: "Drum Set", price: 500 },
  { category: "percussion", instrument: "Xylophone", price: 3000 },
  { category: "percussion", instrument: "Cymbals", price: 200 },
  { category: "percussion", instrument: "Marimba", price: 3000 }
]

const selectContainer = document.querySelector("select");
const productsContainer = document.querySelector(".products-container");

function instrumentCards(instrumentCategory) {
  const instruments =
    instrumentCategory === "all"
      ? instrumentsArr
      : instrumentsArr.filter(
          ({ category }) => category === instrumentCategory
        );

  return instruments
    .map(({ instrument, price }) => {
      return `
          <div class="card">
            <h2>${instrument}</h2>
            <p>$${price}</p>
          </div>
        `;
    }).join('')
}


selectContainer.addEventListener("change", () => {
  const selectedOption = selectContainer.value;
  const result = instrumentCards(selectedOption);
  productsContainer.innerHTML = result
  
});
2

Hi @ezebongmathew5

Try removing the return keyword inside the .map() method.

Happy coding

3

it’s not working see the problem // running tests 1. When the dropdown menu option is changed you should set the inner HTML of

productsContainer

to the result of the

instrumentCards

function called with the selected option as argument. // tests completed