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

JavaScript
1

Tell us what’s happening:

Task is to create button element for deleting songs.What is wrong?

Your code so far

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


/* file: styles.css */


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

<button aria-label="Delete ${song.title}" class="playlist-song-delete"> <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.
31026C4.8897 5.97188 4.94102 5.4684 5.32587 5.18571Z" fill="white"/></svg>  </button>

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

Challenge Information:

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

2

The svg code copied wasn’t the same. Try recopy-pasting it.
Another requirement: The class has to be the first attribute.

4

@zm17jaga Your button looks correct with aria-label and class. It seems like your svg is incorrect. Try to copy and paste it to your code one more time.

1 Like