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");
function instrumentCards(instrumentCategory) {
const instruments =
instrumentCategory === "all"
? instrumentsArr
: instrumentsArr.filter(
({ category }) => category === instrumentCategory
);
instruments.map(item => `
<div class="card">
<h2>${item[instrument]}</h2>
<p>${item[price]}</p>
</div>")`)
return instruments;
}
selectContainer.addEventListener("change", () => {
console.log(instrumentCards(selectContainer.value));
});
Hi. Can you please link to the step you are stuck on and explain what you are stuck on. What error messages do you have?