Build a Music Instrument Filter - Step 13

JavaScript
1

Tell us what’s happening:

I’ve tried over and over with new browser, turned off dark mode, incognito etc. I don’t understand why this won’t work.

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">
    <link rel="stylesheet" href="styles.css">
    <title>Instrument Filter</title>
</head>
<body>

    <select class="select-container" id="instrument-filter">
        <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" id="instruments-grid">
        </div>

    <script src="script.js"></script>
</body>
</html>

/* file: styles.css */
body {
    font-family: sans-serif;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.select-container {
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 200px;
    margin-bottom: 20px;
    cursor: pointer;
}

.products-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    width: 100%;
}

.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

/* 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-container");
const productsContainer = document.querySelector(".products-container");

const instrumentCards = (instrumentCategory) => {
  let filteredArr;

  if (instrumentCategory === "all") {
    filteredArr = instrumentsArr;
  } else {
    filteredArr = instrumentsArr.filter((item) => item.category === instrumentCategory);
  }

  return filteredArr.map((item) => {
    return `<div class="card"><h2>${item.instrument}</h2><p>$${item.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/144.0.0.0 Safari/537.36

Challenge Information:

Build a Music Instrument Filter - Step 13

2

Hi @samtb13

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
image975×451 49.1 KB

It looks like you made changes to the code, in places you were not asked to modify.

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

Only change the code you are asked to modify. Making other changes may cause the tests to fail.

Happy coding

3

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