Build a Music Instrument Filter - Step 13

Curriculum Help
1

Tell us what’s happening:

I have tried everything possible. i do not know what’s wrong . please rectify this as soon as possible.

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region
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("");
}

// Display all instruments when the page loads
productsContainer.innerHTML = instrumentCards("all");

// Update displayed instruments when dropdown changes
selectContainer.addEventListener("change", (event) => {
  productsContainer.innerHTML = instrumentCards(event.target.value);
});
// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Challenge Information:

Build a Music Instrument Filter - Step 13

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/workshop-music-instrument-filter/67213ce0a2ba1278a38df3a5.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome to the forum @Junnuel,

It looks like you may have changed the starting code in areas you were not asked to change, which will cause the tests to fail. Please click the reset button to restore the original code and try again.

image

Can you think of a way to get the selected value without using an event object?

Happy coding

3

Tell us what’s happening:

Step 13. i have tried everything possible . please help. have been stuck since.

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region
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>
      `;
    });
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Challenge Information:

Build a Music Instrument Filter - Step 13

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/workshop-music-instrument-filter/67213ce0a2ba1278a38df3a5.md at main · freeCodeCamp/freeCodeCamp · GitHub

4

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.

5

Hey @Junnuel

Seems like you messed up the indentation and whitepsace. Please reset this step by clicking the button in shown in the image and then submit your answer.

image
image923×354 56 KB

6

Please be very careful not to change the starting code because that will cause the tests to fail.

The changes you made for this step are correct, but the starting code was changed.

Please copy the new code you wrote, reset this step again, and paste your new code back in. It should then pass the tests.