Learn Basic String and Array Methods by Building a Music Player - Step 24

JavaScript
1

Tell us what’s happening:

can anyone help me out with this step? I’m really confused why it isn’t passing and if anyone has any suggestions that would seriously be so appreciated.

Your code so far

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


/* file: styles.css */


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

    .map((song)=> {
…
}).join(“”)
};
      return `
      <li id="song-${song.id}" class="playlist-song">
      <button class="playlist-song-info">
          <span class="playlist-song-title">${song.title}</span>
          <span class="playlist-song-artist">${song.artist}</span>
          <span class="playlist-song-duration">${song.duration}</span>
      </button>
      <button class="playlist-song-delete" aria-label="Delete ${song.title}">
          <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#4d4d62"/>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.32587 5.18571C5.7107 4.90301 6.28333 4.94814 6.60485 5.28651L8 6.75478L9.39515 5.28651C9.71667 4.94814 10.2893 4.90301 10.6741 5.18571C11.059 5.4684 11.1103 5.97188 10.7888 6.31026L9.1832 7.99999L10.7888 9.68974C11.1103 10.0281 11.059 10.5316 10.6741 10.8143C10.2893 11.097 9.71667 11.0519 9.39515 10.7135L8 9.24521L6.60485 10.7135C6.28333 11.0519 5.7107 11.097 5.32587 10.8143C4.94102 10.5316 4.88969 10.0281 5.21121 9.68974L6.8168 7.99999L5.21122 6.31026C4.8897 5.97188 4.94102 5.4684 5.32587 5.18571Z" fill="white"/></svg>
      </button>
      </li>
      `;
    })

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15

Challenge Information:

Learn Basic String and Array Methods by Building a Music Player - Step 24

2

Hi @erincmyers12

Here is a comparison of the original code and your code.

The code in blue is the original code, the code in red is your code.
The code in magenta is the overlap.

image
image1140×577 63.7 KB

The .map() method ends near the bottom of the code block.

Also, make sure you are using regular, not curly quote marks.

Happy coding

3

Thanks. I updated my code to this:

.map((song)=> {
}
).join(“”)};

but it still isn’t working. Still quite confused:(

4

Hi there!

Reset the challenge step and add .join() method to your .map() method. Remember, your map method ends on line 105

5

  • The map method loops over an array of data.

  • The body of the map returns a template literal containing HTML with the data embedded using string interpolation.

  • The array map returns can not be directly added to the DOM as an array and must be a string, so we call join on the array that map returns. This can be done by chaining the join directly onto the end of the map

Example broken up into steps:

const pageElement = document.documentElement;
const data = ["One", "Two", "Three"];

const htmlElementsWithData = data.map((el) => {
  return `<p>${el}</p>`;
});
console.log(htmlElementsWithData); // ["<p>One</p>","<p>Two</p>","<p>Three</p>"]

pageElement.innerHTML = htmlElementsWithData.join("");

Same output with compact code:

document.documentElement.innerHTML = ["One", "Two", "Three"]
  .map((el) => `<p>${el}</p>`)
  .join("");
6

thank you so much! this helped me pass the tests.