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

JavaScript
1

Tell us what’s happening:

ok . this is getting a bit confusing. Where do i type join(“”)?
as a side note: do you think confusing the learner is conducive to good learning?

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>
      `;
    })

// 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/126.0.0.0 Safari/537.36 Edg/126.0.0.0

Challenge Information:

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

1 Like
2

I find the instructions clear, maybe you’re missing something. Find where the map method closes and immediately add the join method.

But if you feel their is an issue with the instructions, you can open an issue on GitHub and provide more convenient alternatives.

1 Like
3

I agree with sam-amos that is confusing. It doesn’t take much to give this extra bit of information and would make it so less confusing. I came here for the same reason. Thanks stephenmutheu

I didn’t know we can submit ideas for improvement. Will check about that. Thanks!

4 Likes
4

I was confused as well. For me it came from the stark visual difference of the example

array.map().join();

and our actual code which is a big block of text that includes an arrow function. I was additionally confused because the .map() method was left out of the block of editable code, but the closing ) was inside the editable code. Maybe that’s a hint, but I couldn’t figure it out and came here for help.

1 Like
5

I believe the Forum is where we all end up when confused. If it helps clarify any: the .map() method is everything in the user editable region of the code. The join() method belongs where the .map() ends. Pay attention to the parenthesis and you should find the answer.
Happy coding!

2 Likes
6

I know it’s a bit late but this was actually extremly good, i got confused as the .map had to parenthesis one of it own and one for song and i got confused in thme two

1 Like
9

If anyone has feedback, please open an issue on github, do not argue with other forum dwellers

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.