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

JavaScript
1

Tell us what’s happening:

I am not sure how to create elements in JS and if I interpolate them right

Your code so far

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


/* file: styles.css */


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

<button class="playlist-song-info">
  <span class="playlist-song-title"></span>
</button>
 document.querySelector('.playlist-song-title').textContent = song.title

// 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/125.0.0.0 Safari/537.36

Challenge Information:

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

2

can you click the reset button? Your code seems to be missing.

When I look at this step in my browser, the following code is shown just above the editing region

const renderSongs = (array) => {
  const songsHTML = array
    .map((song)=> {
      return `
      <li id="song-${song.id}" class="playlist-song">

The last line of this code is setting up a string literal that will be returned.
They want you to add more html elements to that literal similar to how the li element was added

4 
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"></span>
</button>
 document.querySelector('.playlist-song-title').textContent = song.title
      </li>
      `;
    })
};
6

Good try but you need to add the song title as the text of the span element (in between the start and close tag)

1 Like
7

Also this line of code was not requested

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.