Tell us what’s happening:
I have tried everything the test does not pass still can someone help me with this?
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* 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");
const productsContainer = document.querySelector(".products-container");
function instrumentCards(instrumentCategory) {
const instruments =
instrumentCategory === "all"
? instrumentsArr
: instrumentsArr.filter(
({ category }) => category === instrumentCategory
);
return instruments.map(item =>
`<div class="card"><h2>${item.instrument}</h2><p>$${item.price}</p></div>`
).join("");
}
function instrumentCards(instrumentCategory) {
const instruments =
instrumentCategory === "all"
? instrumentsArr
: instrumentsArr.filter(
({ category }) => category === instrumentCategory
);
return instruments.map(
({ instrument, price }) =>
`<div class="card"><h2>${instrument}</h2><p>$${price}</p></div>`
);
}
selectContainer.addEventListener("change", () => {
productsContainer.innerHTML =
instrumentCards(selectContainer.value).join("");
});
// 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/147.0.0.0 Safari/537.36
Challenge Information:
Build a Music Instrument Filter - Step 13