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

JavaScript
1

Tell us what’s happening:

The .join() is placed after the closing parenthesis of the map method. But I am failing the test. Am I not seeing something?

Your code so far

const renderSongs = (array) => {
  const songsHTML = array
    .map((song)=> {
      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}">
          <svgs
            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>
      `;
    }).join("");

Challenge Information:

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

3

I deleted the semicolon but still failing test…

4

Hi @phoenixRyuPanda,

I would ignore the previous comment because the semicolon is perfectly valid. I copied your code over, which I noticed was formatted differently (especially the svg element) than the default in the challenge.

I would recommend resetting the lesson, and then adding your join without modifying any of the HTML within the template literal string. The parser is finicky when things are moved that shouldn’t be.

1 Like
5

@marcusparsons, incredible! Resetting worked! :clap:

6

Absolutely! Just remember to only change what the challenge asks you to change so that way you can move on quicker. Happy Coding! :slight_smile: