search

AnshSinghSonkhia / 40Pie-Music-Player-Website

40π Music Player -- Using HTML5, CSS3 & JavaScript
https://anshsinghsonkhia.github.io/40Pie-Music-Player-Website
MIT License
21 stars 38 forks source link

Making Website more responsive. #34

Closed Kapoor-Tushar closed 2 years ago

Kapoor-Tushar commented 2 years ago

In resopnse to issue #2, #5 and #7 To increase the responsiveness of the website, I have made the following changes:- 1) Added links tag in HTML for Home and About buttons. In Home button I have added the link for the website given in about section of the project. For About button I have not yet inserted any link or file. 2) Added styling similar to that used in actual Spotify website for Home and About button. Whenever the mouser hovers on both of these buttons the cursor changes to pointer and text color changes to green (Spotify green). 3) Added option to select and play the music from the songs container. In this user can click anywhere in songItem container to play the music. When the user clicks on the song present in songs container the songItem container's background color will change to green(Spotify green) indicating which song is being currently being played. When song finishes and moves to next index highlight from the previous song gets removed and the song currently being played will be highlighted. I have also synced all the operations like next, previous and onended with this. Moreover if the user directly plays from the player then also these changes will be seen. 4) I have also done some Cosmetic changes like giving the player background a transparent look, arranging the songItem container tags which were being overflowed and also aligning the songs list to center.

Look at the following images and video for a better understanding:-

https://user-images.githubusercontent.com/82567111/194160719-0fd91d60-b907-4d64-89c9-d4fc2d33fb2a.mp4

40pi1 40pi2 40pi3 40pi4

I hope you will like the changes and effort put by me in this project. Looking forward to get my pull request accepted😊.

AnshSinghSonkhia commented 2 years ago

Hey @Kapoor-Tushar, Your video don't have sound or the website is not playing sound?

AnshSinghSonkhia commented 2 years ago

Hey @Kapoor-Tushar, I have reverted the changes due to this PR with #37.

Kindly, update the features of small play button in front of each song name.

Kapoor-Tushar commented 2 years ago

Hey @Kapoor-Tushar, Your video don't have sound or the website is not playing sound? Hi! @AnshSinghSonkhia, Sorry for the late response. Actually the reason for no sound in the video attached is due the fact that I forgot to turn on the record audio option while capturing the video 😅.

Kapoor-Tushar commented 2 years ago

Hey @Kapoor-Tushar, I have reverted the changes due to this PR with #37.

Kindly, update the features of small play button in front of each song name.

  • It must change to pause when the song is playing & vice-versa.
  • When we click it, it must change to pause button and the song must start playing.

I will work on updating these features and will get back to you soon.

Thank you!, for this wonderful opportunity 😊 .

AnshSinghSonkhia commented 2 years ago

Thanks @Kapoor-Tushar, See you soon. Keep updating.