Build a Music Instrument Filter - Step 12

JavaScript
1

Tell us what’s happening:

help me on how to achieve this Modify your function so that it returns an array of strings containing the HTML code to display the instrument cards, each string corresponding to an object in the instruments array. The strings should have this format

[instrument]

$[price]

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region

function instrumentCards(instrumentCategory) {
  const instruments =
    instrumentCategory === "all"
      ? instrumentsArr
      : instrumentsArr.filter(
          ({ category }) => category === instrumentCategory
        );

  return instruments
}

// 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/145.0.0.0 Safari/537.36

Challenge Information:

Build a Music Instrument Filter - Step 12

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

Try selecting an instrument from the dropdown to see the array contents in the console.

3

I did this

const instrumentsArray = instruments.map(val => \`<div class="card"><h2>${val.instrument}</h2><p>$ ${val.price}</p></div>\` )

and logging

console.log(instrumentCards("brass"));

, the result looks perfect

\[ '<div class="card"><h2>Trumpet</h2><p>$ 200</p></div>',
  '<div class="card"><h2>Trombone</h2><p>$ 300</p></div>',
  '<div class="card"><h2>French Horn</h2><p>$ 4300</p></div>' \]

but it is showing this instrumentCards("all") should return an array of strings representing instrument cards, each with the format <div class="card"><h2>[instrument]</h2><p>$[price]</p></div>. not allowing me to got to the next step

4 
“const instrumentsArray = instruments.map(val => \`<div class="card"><h2>${val.instrument}</h2><p>$ ${val.price}</p></div>\` )“
5

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

6

does this match what you have? check every character, including spaces

7

const instrumentsArray = instruments.map(val => `

${val.instrument}

$ ${val.price}

` )

by console.log(instrumentCards(“all”)); gives the array of strings but still the test is not passing

8

It is now okay, the issue was $${val.price}; before I put a space between the two dollar sign.

Thank you!!