fCC: Use the Twitchtv JSON API

fCC: Use the Twitchtv JSON API.markdown

fCC: Use the Twitchtv JSON API

Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/adBpOw. Rule #1: Don't look at the example project's code. Figure it out for yourself. Rule #2: 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. User Story: I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers. Hint: See an example call to Twitch.tv's JSONP API at https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Front-End-Project-Use-the-Twitchtv-JSON-API. Hint: The relevant documentation about this API call is here: https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel. Hint: Here's an array of the Twitch.tv usernames of people who regularly stream coding: ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"] Remember to use Read-Search-Ask if you get stuck. When you are finished, click the "I've completed this challenge" button and include a link to your CodePen. You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook).

A Pen by Colin MacRae on CodePen.

License.

index.html

  
  <div class="twitchapp">
    <div class="container">
      <div id="navigation">
        <h1>Twitch Streamers</h1>
        <div id="tabs">
        <ul class="nav nav-tabs">
          <li id="all" class="active"><a href="#">all</a></li>
          <li id="online"><a href="#">online</a></li>
          <li id="offline"><a href="#">offline</a></li>
        </ul>
        </div>
      </div>
      <div class="channels">
      </div>
    </div>
  </div>
  

script.js

$(document).ready(function() {
  var streamList = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff","MedryBW","brunofin"];
  var title;
  for (var i = 0 ; i < streamList.length ; i++) {
    var title = streamList[i];
    $.getJSON('https://api.twitch.tv/kraken/streams/' + title + '?callback=?', (function(json) {
        var identifier = streamList[i];
        return function(json) {
          if ((JSON.stringify(json["stream"])) == "null") {
            $(".channels").append('<div class="single-channel channel-offline" id='+identifier+'></div>');
          $("#"+identifier).html('<h2>'+identifier+'</h2>');
            $("#"+identifier).append("<h4 class='status-offline'>Currently Offline<h4>");
          }
          else if (json.error == "Unprocessable Entity") {
            $(".channels").append('<div class="single-channel channel-na" id='+identifier+'></div>');
          $("#"+identifier).html('<h2>'+identifier+'</h2>');
            $("#"+identifier).append("<h4 class='status-na'>"+(JSON.stringify(json.message))+"</h4>");
          }
          else {
            $(".channels").append('<div class="single-channel channel-online" id='+identifier+'></div>');
          $("#"+identifier).html('<h2>'+identifier+'</h2>');
            $("#"+identifier).append("<h4 class='status-online'>Now playing: "+JSON.stringify(json.stream.game)+"</h4>");
          }
          $("#"+identifier).append("<a class='link' href=https://www.twitch.tv/"+identifier+' target='+ "https://www.twitch.tv/"+identifier+ ">" +identifier+" channel</a>");
        };
    })());
};
  
  $("#all").on("click", function() {
      $("#online").removeClass("active");
      $("#offline").removeClass("active");
      $(this).addClass("active");
      $(".single-channel").show();
    });
  
  $("#online").on("click", function() {
      $("#all").removeClass("active");
      $("#offline").removeClass("active");
      $(this).addClass("active");
      $(".channel-offline").hide({queue:false});
      $(".channel-na").hide({queue:false});
      $(".channel-online").show({queue:false});
    });
  
  $("#offline").on("click", function() {
      $("#online").removeClass("active");
      $("#all").removeClass("active");
      $(this).addClass("active");
      $(".channel-online").hide({queue:false});
      $(".channel-offline").show({queue:false});
      $(".channel-na").show({queue:false});
    });
  
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.css

html,
body {
  margin: 0;
  padding: 0;
  background-color: #118ab2;
  color: #ffd166;
}

#navigation {
  text-align: center;
}

#navigation li {
  width: 7rem;
}

#navigation li > a {
  color: #ffd166;
}

#tabs {
  padding: 0 34%;
}

.channels {
  max-width: 80%;
  margin: auto;
}

.single-channel {
  border-radius: 5px;
  background-color: #073b4c;
  padding: 0 20px 10px 40px;
  margin: 3%;
  overflow: hidden;
}

.status-online{
  color: #06d6a0;
  float: left;
}

.status-offline {
  color: #ff476c;
  float: left;
}

.status-na {
  font-style: italic;
  float: left;
}

.link {
  background-color: #ffd166;
  border-radius: 7px;
  border: 3px solid #ffd166;
  padding: 2px;
  float: right;
}

.single-channel > a {
  color: #118ab2;
  text-decoration: none;
}

.single-channel > a:hover {
  color: #ffd166;
  background-color: #118ab2;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />