Build a Music Instrument Filter - Step 13

JavaScript
1

Tell us what’s happening:

Stuck on this step, tried everything that came to my mind but not being successfull

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 filter</title>
    <link rel="stylesheet" href="./styles.css" >
  </head> 
  <body> 
    <h1>Student Instruments</h1> 
    <main> <select class="select-container" id="categorySelect" aria-label="Instrument category"> 
      <option value="all">All</option> 
      <option value="woodwinds">Woodwinds</option> 
      <option value="brass">Brass</option>
      <option value="percussion">Percussion</option> 
      </select> 
        <div class="products-container" id="productsContainer"></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 */

// User Editable Region

const selectContainer = document.getElementById("categorySelect");
const productsContainer = document.getElementById("productsContainer");

const instruments = [
{ name: "Flute", price: 500, category: "woodwinds" },
{ name: "Clarinet", price: 200, category: "woodwinds" },
{ name: "Oboe", price: 4000, category: "woodwinds" },
{ name: "Trumpet", price: 200, category: "brass" },
{ name: "Trombone", price: 300, category: "brass" },
{ name: "French Horn", price: 4300, category: "brass" },
{ name: "Drum Set", price: 500, category: "percussion" },
{ name: "Xylophone", price: 3000, category: "percussion" },
{ name: "Cymbals", price: 200, category: "percussion" },
{ name: "Marimba", price: 3000, category: "percussion" }
];

function instrumentCards(category) {
let filteredInstruments;

if (category === "all") {
filteredInstruments = instruments;
} else {
filteredInstruments = instruments.filter(
(instrument) => instrument.category === category
);
}

return filteredInstruments
.map(
(instrument) =>
`<div class="card">

<h2>${instrument.name}</h2> <p>$${instrument.price}</p> </div>` ) .join(""); }
productsContainer.innerHTML = instrumentCards("all");
selectContainer.addEventListener("change", function (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/144.0.0.0 Safari/537.36

Challenge Information:

Build a Music Instrument Filter - Step 13

2

there is a reason for which you have updated everything? pretty much nothing remains of the starting code of this step