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

JavaScript
1

Tell us what’s happening:

idk where to add the join(“”) method . please tell me

Your code so far

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


/* file: styles.css */


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

      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>
       renderSongs.join("");
    
      `;
    })
   
    
    };
    


// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Challenge Information:

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

2

Hello, if you look above to see the beginning of the code block:

const songsHTML = array
    .map((song)=> {
      return `... `;
    })

you’ll notice that all of the template literals are inside the map function applied to array. As you can see, this code above is more clear and understandable. So, you can simply add the join method to the existing array at the end of the map method. Happy coding :slightly_smiling_face:.

3

You have spot at the bottom to add this method, scroll down to see the last curly bracket.

4

Actually, that is not the last curly bracket. The last curly bracket closes the renderSong function. Instead, he should assign a string to the songsHTML variable using the join function on the array. And array variable end with map function and that is not end with curly bracket.

5

So i guess this could start at the top and still work?

6

I really struggled with this. I now understand I had the location correct, but in the example it states the separator takes a space (between quotations).

const sentence = exampleArr.join(" "); // Separator takes a space character

Once I removed the space between quotations, it accepted my answer. I hope this helps someone else.

2 Likes
7

Yes! This was the problem. Thank you!