This Pull request is in addition to pull request #34 , which was reverted back in regards to #37 .
This pull request contains all the features which the last pull request #34 contained which are:-
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 now inserted the about page link.
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.
Now the new changes that I have done with respect to revert #37 are following:-
1) Whenever the song plays the pause and play button which was inactive in front of each song now changes to pause when the song is playing & vice-versa.
2) Also changed the i tag id numbering(made it serial wise from 0-13) in the index.html file which was causing the pauseall() and startplay() function to not play properly. The numbering previously was not continuous which was generating a null value because of which functions were not working.
I am still not able to add the second functionality mentioned in revert #37 (When we click it, it must change to pause button and the song must start playing), I am still working on that and will soon add that functionality.
I hope you will like the changes and effort put by me in this project.
This Pull request is in addition to pull request #34 , which was reverted back in regards to #37 . This pull request contains all the features which the last pull request #34 contained which are:- 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 now inserted the about page link. 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.
Now the new changes that I have done with respect to revert #37 are following:- 1) Whenever the song plays the pause and play button which was inactive in front of each song now changes to pause when the song is playing & vice-versa. 2) Also changed the i tag id numbering(made it serial wise from 0-13) in the index.html file which was causing the pauseall() and startplay() function to not play properly. The numbering previously was not continuous which was generating a null value because of which functions were not working.
Here are some screenshots and video:-
https://user-images.githubusercontent.com/82567111/196183540-257ccc02-a8f8-487a-9bbc-8170bb009606.mp4
I am still not able to add the second functionality mentioned in revert #37 (When we click it, it must change to pause button and the song must start playing), I am still working on that and will soon add that functionality.
I hope you will like the changes and effort put by me in this project.