Build a Music Instrument Filter

JavaScript
1

Hi, I am stuck at step 13 of this specific workshop.

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-container");

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




function instrumentCards(instrumentCategory) {

  let filteredArr;

  if (instrumentCategory === "all") {

    filteredArr = instrumentsArr;

  } else {

    filteredArr = instrumentsArr.filter(function (instrument) {

      return instrument.category === instrumentCategory;

    });

  }

  return filteredArr.map(function (instrument) {

    return `<div class="card">

      <h2>${instrument.instrument}</h2>

      <p>$${instrument.price}</p>

    </div>`;

  }); 

}

selectContainer.addEventListener("change", (event) => {

  productsContainer.innerHTML = instrumentCards(event.target.value).join("");

});

What am I doing wrong here because the logic itself works correctly.

2

please post a link to the step

1 Like
3

Thanks for the response. I actually solved it just now. I was combining the 14th & 13th step in a single step and that what caused the issue. All I had to do was to reset the step.13, and simply replace the console statement in the eventlistener as instructed.

Plus, the .join() has to be within the function (step.14) it was my mistake to use join() in the eventlistener.

4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.