Train to the Beat is a music search tool that allows tracks to be filtered by tempo and then by genre to create playlists that are tailored to a user’s specific training
##Functions
WHEN I load the page
THEN showing the main page, there are navigate bar can lead you to each page and a information box ask you to input a number
WHEN I input a number and clicked the search button
THEN it showing the genera generated based on getsongbpm API and 250 songs with the BPM number or the nearest possible BPM in the API database
WHEN I click onto one of the genera button
THEN it filtered to the song with the BPM number i put as well as the genera i choose
WHEN I clicked the "Add to list" button near each song
THEN that song will add to my local storage
WHEN I click onto the "Return to top" button
THEN it will bring you to the top of the webpage
WHEN I clicked onto the "song list" in the navigate bar
THEN it will bring me to the song list page
WHEN I input the first digit of the address / or the city name in the "Check the weahter" input area
THEN it showing the weather of current city including : current temperature, feel like temperature adn precipitation based on weatherapi API.
AND at the bottom will showing the map of the city or street (if use postal code) based on GoogleMap API
WHEN you input a name in "Create Playlist" input box and click onto "Add Playlist" button
THEN it will create a playlist named the same as your input
WHEN there is no input in the "Create Playlist" input box and click the "Add Playlist" button
THEN there will showing an error message
AFTER you create the playlist
THEN it will show at the bottom of the box
WHEN you click onto the "delete playlist" button
THEN it will delete the playlist as well as all the songs inside of it
AFTER you create at least one playlist int the "Create PLaylist"
THEN you can add songs from the "Unorganized songlist" area
WHEN you clicked the "Add to playlist" button near the song inside the "Unorganized songlist"
THEN it will add to the playlist you choose based on the dropdown list
WHEN you clicked the "Remove song" button
THEN it will removed from the playlist
WHEN you clicked onto the playlist name at the bottom of "Create Playlist" box
THEN it will lead you to the playlist page
WHEN you at the playlist page
THEN you can see the songs only inside this playlist
WHEN you drag and drop each song
THEN you can change the order of the songs
WHEN you click onto the "delete" button
THEN it will delete from the playlist
WHEN you click onto the "About" from the navigate bar
THEN it showing the reason why we want to create this website and more details
- JavaScript
- HTML
- CSS
- getsongbpm
- weatherapi
- GoogleMap
https://ScalexanderB.github.io/activity-music/
Main page (BPM input and add song)
Song List (check weather and map, create/delete playlist, delete song and add to the playlist)
Playlist page (drag and drop order changing, delete song)
About page (mroe information about the page)
