<div id="twitchfeed"> 
<div class="container">
  <table width="80%" id="twitchtable">
    <caption>
      <h2>Twitch Streaming</h2>
    </caption>
    <tr class="head">
      <th>Icon</th>
      <th>User</th> 
      <th>Streaming</th>
    </tr>
  </table>
</div>
</div>
body {
  background-color: lightblue;  
  font-family: Lombok;
}

caption {
  margin-top: 40px;
  background-color: brown;
  color: silver;
  font-family: Ailerons;
  padding-left: 20px;
  border-style: solid;
}

.online {
  background-color: silver;
}

.offline {
  background-color: grey;
}

.head {
  background-color: green;
}

table {
  border-style: solid;
}

#twitchtable {
  background-color: black;
}

.icon {
  height = 15px;
  width = 15px;
  margin = 5px;
}
function twitchFeed(user){
$.getJSON('https://wind-bow.gomix.me/twitch-api/users/' + user + '?callback=?', function(userData) {
  $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/' + user + '?callback=?', function(streamData) {
    if (streamData.stream !== null) {
      var chan = streamData.stream.game + ":" + streamData.stream.channel.status; 
      var online = "online";
    } else {
    var chan = "offline";
      var online = "offline";
    } 
    var logo = userData.logo; 
    
    $("#twitchtable").append(
      "<tr class=\"" + online + "\">" + 
      "<td>" + "<img height=\"42\" width=\"42\" src=\"" + logo + "\">" + "</td>" +
      "<td>" + "<a target=\"_blank\" href=\"https://www.twitch.tv/" + user + "\">" + user + "</a>" + "</td>" +   
      "<td>" + chan + "</td>" +  
       "</tr>" 
    );
}); 
});
}


$(document).ready(function() {
  var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
  
  users.forEach(function(user){
        twitchFeed(user);
  });
});

/*

    $.getJSON('https://wind-bow.gomix.me/twitch-api/channels/' + user + '?callback=?', function(data) {
  var channelData = JSON.stringify(data);
}); 
     $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/' + user + '?callback=?', function(data) {
  var streamData = JSON.stringify(data);
});
*/

Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js