Creater a music instrument

HTML-CSS
1

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) {

let filteredArr;

if (instrumentCategory === “all”) {

filteredArr = instrumentsArr;

} else {

filteredArr = instrumentsArr.filter(function (instrument) {

  return instrument.category === instrumentCategory;

});

}

return filteredArr.map(function (instrument) {

return `<div class="card">

  <h2>${instrument.instrument}</h2>

  <p>$${instrument.price}</p>

</div>`;

});

}

selectContainer.addEventListener(“change”, (event) => {

productsContainer.innerHTML = instrumentCards(event.target.value).join(“”);

});

2

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge.

image
image668×186 6.59 KB

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.