Step 13 - Build a Music Instrument Filter: Hint box stays visible even though tests pass

Curriculum Help
1

Tell us what’s happening:

Your code so far

Hi everyone,

I'm working on Step 13 of the "Build a Music Instrument Filter" workshop.

The instructions ask to remove the console.log from the event listener and set the inner HTML of productsContainer to the result of calling instrumentCards with the selected category option.

Here is my code:

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 }) =>
        `<div class="card"><h2>${instrument}</h2><p>$${price}</p></div>`
    )
    .join("");
}

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

The console output shows "// tests completed" with no failure message, but the hint box (with the lightbulb icon) stays visible on screen and doesn't go away even after clicking "Check Your Code" again. Is this a display bug, or am I missing something in my code?

Any help would be appreciated. Thanks!

Lesson URL (copy - paste from your browser’s address bar)

2

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge.

image
image668×186 6.59 KB

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

3

Can you please share a link to the challenge?

4

Welcome to the forum @aseelalzaghal28,

Did you try refreshing the page or resetting the step?

Happy coding

Build a Music Instrument Filter: Step 13 | freeCodeCamp.org

5

Hi buddy, Here I would Like to tell you that this is the section where all the campers do tell what is the issue they do face.

Hope this add some value.