FreeCodeCamp Twitch API

In this example below you will see how to do a FreeCodeCamp Twitch API with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by natertot12, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright natertot12 ©
  • HTML
  • CSS
  • JavaScript
    <div class="container text-center center-block">
  <h3>Online</h3>
  <ul id="online">
  </ul>
  <h3>Offline</h3>
  <ul id="offline">
  </ul>
</div>

/*Downloaded from https://www.codeseek.co/natertot12/freecodecamp-twitch-api-dYryqv */
    ul {
  list-style-type: none;
}


/*Downloaded from https://www.codeseek.co/natertot12/freecodecamp-twitch-api-dYryqv */
    $(document).ready(function() {
  var url = "https://api.twitch.tv/kraken/streams/";
  var streamers = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff","test_channel","cretetion","sheevergaming","TR7K","OgamingSC2","ESL_SC2", "brunofin", "comster404"];

  function gameStatus(str) {
    $.getJSON(url + str + "?callback=?", function(data) {
      if(data.stream === null) {
        $("#offline").append("<li class='well'><a href='" + url + str + "'>" + str + "</a></li>");
      } else if(data.hasOwnProperty('error')) {
        $("#offline").append("<li class='alert alert-danger'><a href='" + url + str + "'>" + str + "</a><p>Account Closed</p></li>");
      } else {
        $("#online").append("<li class='alert alert-success'><a href='" + data._links.self + "'>"+ str + "</a><p>" + data.stream.game + ":" + data.stream.channel.status + "</p></li>");
      }
    });
  }
  streamers.forEach(gameStatus);
});

Comments