Twict Tv
by {"name"=>"Vuyisile Weni"}
Twitch TV User
instructions
Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/Myvqmo/.
Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.
User Story: I can see whether Free Code Camp is currently streaming on Twitch.tv.
User Story: I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.
User Story: if a Twitch user is currently streaming, I can see additional details about what they are streaming.
Hint: See an example call to Twitch.tv's JSONP API at http://forum.freecodecamp.org/t/use-the-twitchtv-json-api/19541.
Hint: The relevant documentation about this API call is here: https://dev.twitch.tv/docs/v5/reference/streams/#get-stream-by-user.
Hint: Here's an array of the Twitch.tv usernames of people who regularly stream:
["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
UPDATE: Due to a change in conditions on API usage explained here Twitch.tv now requires an API key, but we've built a workaround. Use https://wind-bow.gomix.me/twitch-api instead of twitch's API base URL (i.e. https://api.twitch.tv/kraken ) and you'll still be able to get account information, without needing to sign up for an API key.
Remember to use Read-Search-Ask if you get stuck.
The Logic of this Application.
- Generally the user has to see a list of twitch tv members and weather they are online streaming or offline, if the twitch tv member is online the user should be able to see what the member is currently streaming, else if offline nothing is displayed.
- But weather a member is online or offline, when the user clicks on the name of the member, it should open a new tab of the members twitch tv channel.
The steps I took.
- I created a javascript variable and called names and gave it the list of twitch tv users that provided by free code camp. var names = [“ESL_SC2”, “OgamingSC2”, “cretetion”, “freecodecamp”, “storbeck”, “habathcx”, “RobotCaleb”, “noobs2ninjas”]
- Then I used forEach to access or touch every element in the list.
- Within the forEach I had the $.ajax function to pull requests in json format for each element from an api which I presented it as: ‘https://wind-bow.glitch.me/twitch-api/streams/’ + element + ‘?callback=?’.
- From there I filtered or specified the important data like this data.stream.game if or when a member from the list is online.
- For each member’s name in the list, I set a link that opens a new tab which is the channel of the specified user, like this: ‘href=https://go.twitch.tv/${element}