##Do Now Begin this session by completing the Do Now activity.
##Scope You have just been hired as a consultant for Sound Inc. A brand new streaming music service. You have been tasked to create a webapp that can play songs based on how the user is feeling. Your manager has given you a deadline of one week to complete this project and has provided you with a wireframe for the webapp.
##Project Criteria Your Manager has laid out the following requirements for the project:
- This project must use the SoundCloud API
- The user must be able to input an array of moods and hear a song that reflects their mood
- The song title and artist must appear while the song is playing
- There must be a random button that will play a song based on a randomly chosen mood
##Learning Objectives By the end of this project the employee will be able to...
- interpret API documentation
- use basic API calls
##References/Tools
##Vocabulary
- API (Application Program Interface)
- Click Handler
- Documentation
##Instructions
You will notice that there are comments inside the script.js file that provide instructions for how components of this project should be made.
####In order to make Soundmood functional you will need to complete the tasks below:
###1) Fork this repo into your own CLoud9 workspace
###2) Initialize the SoundCloud API client
- Go to the SoundCloud API Documentation
- Find Your Apps in the Soundcloud API documentation right side navigation
- Get your API token!
###3) Play a track
Play a track using the SoundCloud API (Reading the Soundcloud documentation will help you figure out how to play a track)
- Read the SoundCloud documentation to figure out how to stream (or play) a track
HTTP API GUIDE -> Playing Sounds -> Streaming sounds
- Use
SC.stream
to play a track
- Hint: you need to know something about the track
- Fill out the
playOneTrack()
function
- Hint: don’t forget to add
playOneTrack()
todocument.ready()
###4) Add click handlers
Add a click handler for the #go
button -- make the #go
button DO something by adding a click handler!
- Hint: you can use Javascript or jQuery for this
- Hint: call the click handler
playOneTrack()
to play a song when you click the button
###5) Find a track based on the user's mood and play it
Find a track based on the user’s mood and play it -- make the click handler play a song based on the user's input!
- Fill out the
goClicked()
function! It should: - Get the user's input from the
#mood
field - Call
searchTracks(mood)
. * Hint: there are helper methods inscript.js
that you can use! - Fill out
searchTracks(mood)
- Read API documentation to find
SC.get
- Fill out
searchTracks()
to find the track for the user's mood usingSC.get
- Make sure to
console.log()
the response from the API so you can see what it returned! - Get the track's
id
- Call
playTrack(id)
- BONUS: Update jumbotron
#songtitle
to display the song title - Fill out
playTrack()
- Make sure to keep track of the song you are playing by storing it in
currentSong
- Play the track for the given
id
* Hint: look atplayOneTrack()
for help
###6) Randomization: Make the random button work!
- Fill out the
moodList
array with 10 moods/emotions
- ex. 'happy', 'sad'
- Add
#random
button click handler - Fill out
randomClicked()
+randomMood()
##Bonus Criteria Your Manager has offered a stipend a $500 for each of the bonus requirements listed below:
- Change the color of the jumbotron to match the user's mood
- Add Bootstrap typeahead to the
#mood
input field
##How to Submit The final code for this project must be pushed back up to your repo on GitHub. Then share the link to your repo at the project submission link found in the header of the Daily Session Document (bit.ly/ScriptEd).
To push to GitHub run the following commands in your terminal:
git status
git add .
git commit -m "example comment"
git push origin master
##Homework Instructor will assign homework based on progress in class.