Twitchtv JSON API

index.html

<div class="self-container">
  <h1>TWITCHERS</h1>
  <div class="dropdown">
    <button class="btn btn-default btn-block dropdown-toggle" type="button" data-toggle="dropdown">
      All
    </button>
    <ul class="dropdown-menu btn-block">
      <li id="all"><a href="#">All</a></li>
      <li id="online"><a href="#">Online</a></li>
      <li id="offline"><a href="#">Offline</a></li>
    </ul>
  </div>
  
  <ul class="list">
  </ul>
</div>

script.js

var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404"];
var u = document.querySelector(".list");
var onlineChannels = [];
var offlineChannels = [];

$(document).ready(function(){
  // loop throught the list of channels to operate each one
  for(var channel = 0; channel < channels.length; channel++){
    getAndExecuteData(channels[channel]);
  }
  
  // event when we want to show all the channels
  $("#all").on("click", function(){
    $(".list").html("");
    $(".btn-default").text("All");
    onlineChannels = [];
    offlineChannels = [];
    for(var channel = 0; channel < channels.length; channel++){
      getAndExecuteData(channels[channel]);
    }
  });
  
  // event when we want to show online channels
  $("#online").on("click", function(){
    $(".list").html("");
    $(".btn-default").text("Online");
    for(var channel = 0; channel < onlineChannels.length; channel++){
      showData("Online", onlineChannels[channel]);
    }
  });
  
  // event when we want to show offline channels
  $("#offline").on("click", function(){
    $(".list").html("");
    $(".btn-default").text("Offline");
    for(var channel = 0; channel < offlineChannels.length; channel++){
      showData("Offline", offlineChannels[channel]);
    }
  });  
});

// get the data and execute them 
function getAndExecuteData(channel){
  // First we should get the status of each channel
  $.getJSON(getURL("streams", channel), function(data){
    // Then, manipulate data depending on which status we get
    if(data["stream"] === null) {
      offlineChannels.push(channel);
      showData("Offline", channel);
    }else if(data["stream"] === undefined){
      showData("Not Available", channel);
    }else {
      onlineChannels.push(channel);
      showData("Online", channel);
    }
  });
}

// Depending on status, manipulate the data we get and show it on the web page
function showData(status, channel){
  $.getJSON(getURL("channels", channel), function(data){
    var list = document.createElement("li");
    var logo = document.createElement("img");
        logo.setAttribute("alt", "logo");
    var ns = document.createElement("div");
        ns.setAttribute("class", "nsgroup");
    var name = document.createElement("p");
    var nameContent = document.createTextNode(channel);
    if(status !== "Not Available"){      
      var link = document.createElement("a");
        link.setAttribute("href", data["url"]);
        link.setAttribute("target", "_blank");
      var stats = document.createElement("p");
        stats.setAttribute("class", "detail");
      var statusContent = document.createTextNode(data["game"] + " - " + data["status"]);
    
      link.appendChild(nameContent);
      name.appendChild(link);
      stats.appendChild(statusContent);
      ns.appendChild(name);
      if(status === "Online") {  
        logo.setAttribute("src", data["logo"]);
        list.style.background = "#90EE90";
        ns.appendChild(stats);
      }else{
        logo.setAttribute("src", "https://0.gravatar.com/avatar/09c96925292b9671a1a6dac1ff587972?s=128&amp;d=retro&amp;r=G");
        list.style.background = "#f3f3f3";
      }
    }else{
      name.appendChild(nameContent);
      ns.appendChild(name);
      logo.setAttribute("src", "https://0.gravatar.com/avatar/09c96925292b9671a1a6dac1ff587972?s=128&amp;d=retro&amp;r=G");
      list.style.background = "red";
      list.style.color = "white";
      name.style.textDecoration = "line-through";
    }
  
    list.appendChild(logo);
    list.appendChild(ns);
    u.appendChild(list);
  });  
}

// get the different url depending on the type of it
function getURL(type, channel){
  return "https://wind-bow.gomix.me/twitch-api/" + type + "/" + channel + "?callback=?";
}

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

style.css

body {
  font-size: 18px;
  background: #4CB8C4; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #4CB8C4 , #3CD3AD); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #4CB8C4 , #3CD3AD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.self-container{
  margin: 150px auto;
  max-width: 100%;
  width: 500px;
  box-shadow: 0 0 3px rgba(0,0,0,0.1);
}

h1 {
  text-align: center;  
  background: steelblue;
  padding: 10px 0;
  margin: 0;
  color: white;
  font-weight: bold;
}

.btn-default {
  border-radius: 0; 
  border: 0;
  color: steelblue;
  font-size: 24px;
  font-weight: bold;
}

.dropdown-menu li {
  text-align: center;
  color: steelblue;
  font-size: 24px;
  font-weight: bold;
}

.container {
  width: 40%;
  margin-top: 200px;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list li {
  padding: 12px 0;
  border: 1px solid white;
}

img {
  max-width: 50px;
  border-radius: 50%;
  margin-right: 3%;
  margin-left: 3%;
}

.nsgroup {
  display: inline-block;
  vertical-align: middle;
  max-width: 80%;
}

.nsgroup p {
  padding: 0;
  margin: 0;
}

.detail {
  font-size: 12px;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

styles

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

twitchtv-json-api.markdown

Twitchtv JSON API

A Pen by Hoang Vo on CodePen.

License.