Build a Music Instrument Filter - Step 13

JavaScript
1

Tell us what’s happening:

In the workshop ‘Build a Music Instrument Filter’ stage 13 my code runs without error and works in both Firefox and Chromium via live server in visual studio code. It also works as expected in the preview window on FreeCodeCamp but doesn’t pas the tests. error says I’m not setting the innerHTML of the productsContainer but I am?

Your code so far

<!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>


*,
*::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;
}


/* JavaScript */

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) {
  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(""); // 👈 Important: join to remove commas  
}

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

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:144.0) Gecko/20100101 Firefox/144.0

Challenge Information:

Build a Music Instrument Filter - Step 13

2

Welcome back to the forum @gunna2807

Here is a comparison of the original code and your code.

The code in blue is the original code, the code in red is your code.
The code in magenta is the overlap.

image
image901×482 50.9 KB

It looks like you made changes to the seed code.

Please reset the step to restore the seed code and try again.

Do not make modifications you are not asked to do, as this may cause the tests to fail.

Happy coding

3

Thanks I thought it would be something like that in the background tests. I’ll reset and try again, thanks for the tip.

4

Thanks again Teller, the small change I made to the seed code was enough to cause the tests to fail, lesson learnt!

1 Like