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

JavaScript
1

Tell us what’s happening:

Hi there

Can anyone help with this, I am stuck

Thanks
Iskren

Your code so far

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


/* file: styles.css */


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

      return songs.map(song =>`
      <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>`).join("");
    })


// 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.4.1 Safari/605.1.15

Challenge Information:

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

2

You should add .join("") method after the last parentheses

– removed solution –

3

still won’t work, I did what you said

1 Like
4

I wrote that and it was correct

– removed solution –

1 Like
5

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like
6

Hello @iskren500 !

I believe @OmarHossam is suggesting to add the join function to the last parenthesis at the very bottom of the code.

If this works for you, please check off ‘Solution by @OmarHossam’ as they tried to guide you. I am just clarifying my understanding of their efforts.

Wishing you good progress on your coding journey. :slightly_smiling_face:

1 Like
7

I didn’t know because I just created the account today, but I appreciate your efforts.

1 Like
8

Hi @iskren500

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
image1157×517 63 KB

You appear to have altered the seed code.
Please reset the step to restore the original code.
Then at the end of the .map method add the join method mentioned in the instructions.

Happy coding

9

Hello @iskren500 !

Teller has provided an overview of your full code provided; whereas I only provided you with the location of the end of the .map function.

Sometimes, it is difficult to see where the end of codes are so we need to try several different times to locate where we need to be to add the required code.

Keep up the great progress, and know, everyone in here was or is a learner. Some just have had a bit longer in their journeys than others.

Wishing you more good progress on your coding journey. :slightly_smiling_face: