JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Inconsolata"></script>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="title">
<h1>Twitch Monitor</h1></div>
</div>
</div>
<div class="main">
<div class="row stream-entry">
<div class="col stream-title">
Name
</div>
<div class="col stream-description">
Playing
</div>
</div>
</div>
</div>
<script>
var twitchApiEndpoint = "https://wind-bow.glitch.me/twitch-api";
var streamsToGet = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var streamsStatuses = [];
$(document).ready(getEntries);
function getEntries() {
for (var i = 0; i < streamsToGet.length; i++) {
$.getJSON(twitchApiEndpoint + "/streams/" + streamsToGet[i], function(json) {
if (json.stream == null) {
var streamStatus = "offline";
} else {
var streamStatus = json.stream.game;
}
$(".main").append('<div class="row stream-entry" id="' + i + '"><div class="col stream-title">' + streamsToGet[i] + '</div><div class="col stream-description">' + streamStatus + '</div>');
});
}
}
</script>