Update script.js, Added Features to Enhance UX #255
Conversation
Added keyboard controls and enhanced mute functionality - Added spacebar event listener to play/pause the song - Enhanced the mute button: volume slider now updates (0 when muted, 100 when unmuted) - Implemented seek controls: Left Arrow rewinds 5s, Right Arrow forwards 5s
There was a problem hiding this comment.
Hi @ZarhanMemon, thanks for reviewing! Could you please clarify what’s still in progress or any changes you’d like me to make?
|
@TalhaUsmanOfficial you can add input me search feature like when you are
in one of the playlist then if you search the name of the particular song
name you can compare it with the song inside the playlist or just make the
array of song names and use for and ifelse to check and then do hidden to
other song cards and only display that song
…On Sun, 9 Mar, 2025, 11:36 am MUHAMMAD TALHA USMAN, < ***@***.***> wrote:
***@***.**** commented on this pull request.
Hi @ZarhanMemon <https://github.com/ZarhanMemon>, thanks for reviewing!
Could you please clarify what’s still in progress or any changes you’d like
me to make?
—
Reply to this email directly, view it on GitHub
<#255 (review)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/BKBFVCGCMVBKMNDKHFFBLZL2TPLABAVCNFSM6AAAAABYTKML4GVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDMNRZGMZDIMJSGQ>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
Got it, @ZarhanMemon! I'll add a search feature to filter songs within the playlist by name. Thanks for the suggestion! 🚀
|
- Implemented a search feature to filter songs within a playlist - Created a `filtered_songs` array to store and display only matching songs - When a user searches, the list updates dynamically to show relevant results - Non-matching songs are hidden for a better user experience
| @@ -2,6 +2,7 @@ console.log('Lets write JavaScript'); | |||
| let currentSong = new Audio(); | |||
| let songs; | |||
| let currFolder; | |||
| let filtered_songs = []; | |||
There was a problem hiding this comment.
Filtered Array, now we will use filtered_songs array instead of songs array
| currFolder = folder; | ||
| let a = await fetch(`/${folder}/`) | ||
| // Here I also add attribute of filter = flase, it checks if the filter is true then it will only show the filtered songs which were searched by user | ||
| async function getSongs(folder,filter=false) { |
There was a problem hiding this comment.
also add the attribute of filter, by default it is false, when it is true then we will not fetch the data, we will filter the existing data.
|
|
||
| }) | ||
| // I'll also add the search input in html and will also add it's css | ||
| search.addEventListener("keyup", async (event) => { |
There was a problem hiding this comment.
add an event listener for the input of type search in html
|
@ZarhanMemon I've added the search functionality as requested! Now, users can search for songs within a playlist, and only matching songs will be displayed. Let me know if any further improvements are needed. 😊
|
…ch input - Implemented a search feature to filter songs within a playlist - Created a `filtered_songs` array to dynamically display matching songs - Styled the search input field (`#search`) for a clean and modern look - Added border-radius and padding for better UI - Applied background color and text color for theme consistency - Removed default focus outline for a sleek appearance
Added Search bar in HTML, also commit the styling and js
✨ Added keyboard controls and enhanced mute functionality
✅ Added spacebar event listener to play/pause the song
✅ Enhanced the mute button: volume slider now updates (0 when muted, 100 when unmuted)
✅ Implemented seek controls: Left Arrow rewinds 5s, Right Arrow forwards 5s
✅ Enhanced Volume Control: If the song is muted and user increases or decreases the volume then the volume will automatically unmuted.