Build a Music Instrument Filter - Step 11

JavaScript
1

Tell us what’s happening:

I feel there is something wrong with my idea of my first push statement, please guide me so that I can solve this problem.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Music Instruments product page</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1>Student Instruments</h1>

    <main>
      <select class="select-container">
        <option id="all" value="all">All</option>
        <option id="woodwinds" value="woodwinds">Woodwinds</option>
        <option id="brass" value="brass">Brass</option>
        <option id="percussion" value="percussion">Percussion</option>
      </select>

      <div class="products-container">
        <div class="card">
          <h2>Flute</h2>
          <p>$500</p>
        </div>
        <div class="card">
          <h2>Clarinet</h2>
          <p>$200</p>
        </div>
        <div class="card">
          <h2>Oboe</h2>
          <p>$4000</p>
        </div>

        <div class="card">
          <h2>Trumpet</h2>
          <p>$200</p>
        </div>
        <div class="card">
          <h2>Trombone</h2>
          <p>$300</p>
        </div>
        <div class="card">
          <h2>French Horn</h2>
          <p>$4300</p>
        </div>

        <div class="card">
          <h2>Drum Set</h2>
          <p>$500</p>
        </div>
        <div class="card">
          <h2>Xylophone</h2>
          <p>$3000</p>
        </div>
        <div class="card">
          <h2>Cymbals</h2>
          <p>$200</p>
        </div>
        <div class="card">
          <h2>Marimba</h2>
          <p>$3000</p>
        </div>
      </div>
    </main>
    <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --dark-grey: #0a0a23;
  --white: #ffffff;
  --yellow: #f1be32;
}

body {
  background-color: var(--dark-grey);
  color: var(--white);
}

h1 {
  text-align: center;
  margin-top: 20px;
}

.select-container {
  display: block;
  margin: 25px auto;
  padding: 8px;
  border: 4px solid var(--white);
  border-radius: 4px;
  width: 200px;
}

.products-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

@media (min-width: 760px) {
  .products-container {
    flex-direction: row;
  }
}

.card {
  background-color: var(--white);
  color: var(--dark-grey);
  border: 4px solid var(--yellow);
  border-radius: 5px;
  padding: 10px;
  width: 200px;
}

/* file: script.js */
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");

// User Editable Region

function instrumentCards(instrumentCategory) {
  let catArr = [];
  for(let i = 0; i < instrumentsArr.length; i++) {
    if(instrumentCategory === instrumentsArr[i].category) {
      catArr.push(instrumentsArr[i])
    }
    else if(instrumentCategory === "all") {
      catArr.push(instrumentsArr);
    }
  }  
};

console.log(instrumentsArr.length);

selectContainer.addEventListener("change", () => {
  console.log(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/133.0.0.0 Safari/537.36

Challenge Information:

Build a Music Instrument Filter - Step 11

2

make your function return an array containing the instrument objects with the same category of instrumentCategory

Your function doesn’t return anything

3

Yes, I forgot it by mistake. I corrected it, still this step not passing. Please guide me what I maybe missing.

Updated code-

function instrumentCards(instrumentCategory) {
  let catArr = [];
  for(let i = 0; i < instrumentsArr.length; i++) {
    if(instrumentCategory === instrumentsArr[i].category) {
      catArr.push(instrumentsArr[i]);
    }
    else if(instrumentCategory === "all") {
      catArr.push(instrumentsArr);
    }
  }  return catArr;
};

console.log(selectContainer.value)

selectContainer.addEventListener("change", function() {instrumentCards(selectContainer.value)});
4

Are you getting any errors or hints or warnings?

5

Please console.log() what you’re returning if instrumentCategory is “all.”

Remember, this code is inside a for loop:

else if(instrumentCategory === "all") {
      catArr.push(instrumentsArr);
}
6

You are asked to return the array. Pushing an array into an array isn’t going to give the same as just an array.

Also, you need to update your event listener so it still logs.

7

no, I am not getting any errors

8

hints? Feedback? Check the console.

9

yes, you are right, when instrumentCategory === “all” then it gets printed many times.

I will try to think of a different approach then.
Thank you :slight_smile:

10

yes, I got 1 hint, due to for loop, when instrumentCategory is “all" then all instruments gets printed many times.

11

If instrumentCategory is equal to all , return the whole instrumentsArr array.

That is not what you are doing here.

catArr.push(instrumentsArr);
12

yes, I was about to reply you. I read your previous reply and was reading my code.

Got it, right now I am getting an array inside an array.

13

I passed the test, I just changed the code structure little bit, but logic same.

Updated code-

removed by mod

Thank you @lasjorg @pkdvalis @fcc4b6d10c4-b540-4e2 :heart: :innocent:

I am not sure, which reply I should mark the solution.

1 Like
14

It doesn’t really matter. I will mark your own post as the solution. You did solve it after all.

15

Please do not post solution code to the forum, thanks.

It is great that you solved the challenge, but we are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like
16

Okay I will keep it in mind. I am sorry