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

JavaScript
1

Tell us what’s happening:

playButton.setAttribute(“aria-label”,song?.title ? Play ${song.title} : “Play”);

can someone explain to me how the logic behind this works so I can understand better?

Your code so far

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


/* file: styles.css */


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

const setPlayButtonAccessibleText = () => {
  const song = userData?.currentSong || userData?.songs[0];
  playButton.setAttribute("aria-label",song?.title ? `Play ${song.title}` : "Play");
  
};

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:149.0) Gecko/20100101 Firefox/149.0

Challenge Information:

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

2

Here you are setting the value of the aria-label attribute of the play button based on whether or not you have a song title. And the code is making that decision using a ternary operator as the second argument of the setAttribute() method. A ternary operator takes the form: <condition to evaluate as boolean> ? <value if true> : <value if false>.

Happy coding!