The thumbnail images have nothing to do with the songs, they are simply free images from Unsplash.
Features added
-Artist images added to the data array
the same Images used as list thumbnails only size reduced
Favorite songs are added to the cart and listed
Favorite songs are listed dynamically and checked before adding to the list if a song is already inside the favorite cart.
Things I wanted to add but face challenges
Toggle Play and Pause buttons, I thought displaying both buttons at the same time is not cool
display a progress bar for a current song based on the duration
displaying some wave animation that syncs with the current song, when I click to pause the wave should stop etc…
-delete favorite songs
I like that you are taking the initiative to add more functionality to a project. That’s a great way to learn.
One piece of advice I will give you is that you can’t just add click handlers to non-functional elements because then they aren’t accessible to people using a keyboard. So the “Like” button needs to be an actual button element. The ability to show/hide the playlist and favorites list needs to be a button as well. There are other accessibility concerns here as well that I won’t go into now. The main point here is that you should only add event handlers to functional HTML elements. In other words, elements that the user can interact with.
i also made the music player and added a progress bar, one can get to the desired part of the song directly. Liked you additions and i will also try to imprement those things in my project, any suggestion you want to share with me?
I am planning to add the time duration and time elapsed,
