Build a Music Instrument Filter - Step 12

JavaScript
1

Tell us what’s happening:

I am having some issues getting past step 12 in this workshop. I went ahead and looked at other solutions people have already come to. I utilized an approach one had made, but had to mess around with the code since the full solution wasn’t posted. Currently, I am unsure why my code is not passing the test cases for this step.

Your code so far

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


/* file: styles.css */


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

function instrumentCards(instrumentCategory) {
  const filteredArr = instrumentsArr.filter(({ category }) => category === instrumentCategory);
  const convertedArr = filteredArr.map(val => `<div class="card"><h2>${val.instrument}</h2><p>${val.price}</p></div>`);
  const fullConvertedArr = instrumentsArr.map(val => `<div class="card"><h2>${val.instrument}</h2><p>${val.price}</p></div>`);

  const instruments =
    instrumentCategory === "all"
      ? fullConvertedArr
      : convertedArr;

  return instruments;
}

// User Editable Region

It doesn’t seem to pass the code even though it contains the HTML markup for all the elements being listed to the console and only a selected handful with the given instrument category.

Prompt from step:

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 <div class="card"><h2>[instrument]</h2><p>$[price]</p></div>

Challenge Information:

Build a Music Instrument Filter - Step 12

2

Sometimes the cleanest solution is to start fresh.

If you reset the lesson to get the original function back, you can then add .map() directly to the return statement without all the extra variables.

1 Like
3

The required output needs a dollar sign before the price - eg if the price is 5.45 the output should show $5.45

1 Like
4

This worked, thank you!

5

Yeah, I just now realized it wasn’t properly displaying the ‘$’ symbol. I had to change from a template string to a regular string while using string concatenation. For some reason, when I passed the step, the workshop reverted back to a template string even though the extra ‘$’ symbol was highlighted red due to a syntax error.

6

it’s more like each step is a separate challenge with a predefined starting code that is not affected by what you wrote in previous steps

1 Like