Twitch.tv API (FCC)

index.html

<link href='https://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'>

<h1>Twitch.tv Streamers</h1>

<div class="btn-container">

  <button id="showAll" class="active">Show all</button>
  <button id="showOnline">Online only</button>
  <button id="showOffline">Offline only</button>

</div>

<div class="container">

  <div id="output"></div>

</div>

script.js

var twitcher = ["freecodecamp", "OgamingSC2", "jackel_27", "storbeck", "terakilobyte", "ESL_CSGO", "habathcx", "esl_csgo_pl", "RobotCaleb", "esl_SC2", "thomasballinger", "noobs2ninjas", "beohoff"];

function getURL(type, name) {
  return "https://api.twitch.tv/kraken/" + type + "/" + name + "?=callback?"; // type = "users" for info when offline --> 'display_name'; else use "streams";
};

var userData, streamData;
var status, chanStatus, logo, link;

$(document).ready(function() {
  twitcher.forEach(function(channel) {
    $.when($.getJSON(getURL("streams", channel), function(json) {

      }),
      $.getJSON(getURL("users", channel), function(data) {

      })).then(function(stream, user) {
      streamData = stream;
      userData = user;

      if (streamData[0].stream) {
        status = streamData[0].stream.channel.status;
        logo = streamData[0].stream.channel.logo;
        link = streamData[0].stream.channel.url
        $("#output").prepend(displayItems(status, logo, link, "online"));
      } else {
        status = "Offline";
        logo = "https://i.ytimg.com/vi/y5qYUsmZNHg/maxresdefault.jpg";
        link = "https://www.twitch.tv/" + userData[0].name;
        $("#output").append(displayItems(status, logo, link, "offline"));
      }
    })
  })

  $("#showAll").on("click", function() {
    $(".offline").fadeIn("slow");
    $(".online").fadeIn("slow");
    $(".active").removeClass("active");
    $(this).addClass("active");
  });
  $("#showOnline").on("click", function() {
    $(".offline").fadeOut("slow");
    $(".online").fadeIn("slow");
    $(".active").removeClass("active");
    $(this).addClass("active");
  });
  $("#showOffline").on("click", function() {
    $(".online").fadeOut("slow");
    $(".offline").fadeIn("slow");
    $(".active").removeClass("active");
    $(this).addClass("active");
  });

})

function displayItems(status, logo, link, onOffLine) {
  return "<div class='display " + onOffLine + "'><img src='" + logo + "'/>" + "<h3><a href='" + link + "' target='_blank'>" + userData[0].display_name + "</a></h3><p>" + status + "</p></div>"
}
/*
function showOnline() {
  $(".online").show("fast");
  $(".offline").hide("slow");
  console.log("Online");
}

function showOffline() {
  $(".offline").show("fast");
  $(".online").hide("slow");
  console.log("Offline");
}

function showAll() {
  $(".offline").show("fast");
  $(".online").show("fast");
  console.log("All");
}
*/

scripts

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

style.css

body {
  font-family: 'Voltaire', sans-serif;
  background: url('http://www.pokermediapro.com/wp-content/uploads/2015/03/twitch-tv-2.jpg');
  background-size: 100%;
  background-attachment: fixed;
  overflow-y: scroll;
}


/* Let's get this party started */

::-webkit-scrollbar {
  width: 30px;
}


/* Track */

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 1);
}


/* Handle */
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 20px;
  border: 10px solid black;
  background: rgba(85, 75, 150, 0.8);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(85, 75, 150, 0.4);
}

h1 {
  text-align: center;
  font-size: 3em;
  color: #fff;
  text-shadow: 4px 4px 3px #333;
}

.container {
  display: flex;
  width: 100%;
}

#output {
  margin: auto;
  width: 90%;
}

.display {
  display: flex;
  align-items: center;
  margin: 10px auto;
  padding: 20px;
  border-radius: 10px;
  width: 50%;
}

.display h3,
p {
  margin: 10px;
}

img {
  height: 75px;
  width: 75px;
  border-radius: 50%;
}

a {
  text-decoration: none;
  color: #000;
}

a:visited {
  text-decoration: none;
}

a:hover {
  color: #fff;
}

.online {
  background-color: #24a;
}

.offline {
  background-color: #999;
  opacity: 0.9;
}

.btn-container {
  display: flex;
  margin: 15px auto;
  justify-content: center;
  width: 20%;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}

button {
  border: 1px solid black;
  font-family: 'Voltaire', sans-serif;
  width: 100px;
  height: 50px;
  margin: 10px;
  border-radius: 10px;
  font-size: 1em;
  background-color: #000;
  color: #999;
  transition-duration: 0.4s;
}

button:hover {
  background-color: #24a;
  color: #fff;
}

.active {
  background-color: #24a;
  color: #fff;
}

Twitch.tv API (FCC).markdown

Twitch.tv API (FCC)

Bonfire using the Twitch API for FreeCodeCamp

A Pen by db on CodePen.

License.