Skip to content

Instantly share code, notes, and snippets.

@lseffer

lseffer/index.html

Created June 18, 2017 10:41
Show Gist options
  • Save lseffer/442a3fb322ea41252792d5adf301c87e to your computer and use it in GitHub Desktop.
Save lseffer/442a3fb322ea41252792d5adf301c87e to your computer and use it in GitHub Desktop.
Download ZIP
qjZVNL
Raw
index.html
<body>
<div class="container page jumbotron">
<div class="container titlebar">
<h1>Twitch API Freecodecamp</h1>
<p>Channels are updated every 20 seconds.</p>
</div>
<div class="container outer">
</div>
<div id=footer>Leonard Seffer</footer>
</div>
</body>
Raw
script.js
var channels = ["eulcs1", "freecodecamp", "AdmiralBulldog", "comster404", "habathcx", "RobotCaleb", "noobs2ninjas"];
function printConsole(json) {
if (json != null) {
console.log(json);
}
}
function createHTMLfromChannel(json, channel) {
var outer = $(".outer");
var channelid = channel;
if ($(".channelinfo." + channelid).length === 0) {
if (json.error) {
outer.append(
"<div class='row channelinfo " +
channelid +
"'> <div class=col> <img src=https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Anti.svg/600px-Anti.svg.png height=50 width=50> <a href=#>" +
channel +
"</a><span class='streamstatus'>Channel removed or never existed</span>" + '</div>'+
'<div class="circle offline"></div>' +
"</div>"
);
} else {
outer.append(
"<div class='row channelinfo " +
channelid +
"'><div class=col> <img src=" +
json.logo +
" height=50 width=50> <a href=" +
json.url +
">" +
json.display_name +
"</a>" +
"<span class='streamstatus " +
channelid +
"'> </span>" + '</div>'+
'<div class="circle offline"></div>' +
"</div>"
);
}
}
}
function checkOnline(json, channel) {
if (json.stream) {
$(".channelinfo." + channel)
.find(".circle")
.removeClass("offline")
.addClass("online");
if(json.stream.channel.status.length>40){
$(".streamstatus." + channel).text(json.stream.channel.status.substring(0,40)+' ...');
} else {
$(".streamstatus." + channel).text(json.stream.channel.status);
}
} else {
$(".channelinfo." + channel)
.find(".circle")
.removeClass("online")
.addClass("offline");
}
}
function getChannelInfo(channel, callback) {
$.getJSON(
"https://wind-bow.glitch.me/twitch-api/channels/" + channel,
function(json) {
callback(json, channel);
}
);
}
function getStreamInfo(channel, callback) {
$.getJSON(
"https://wind-bow.glitch.me/twitch-api/streams/" + channel,
function(json) {
callback(json, channel);
}
);
}
function updateChannelInfo() {
for (var i = 0; i < channels.length; i++) {
getChannelInfo(channels[i], createHTMLfromChannel);
getStreamInfo(channels[i], checkOnline);
}
console.log("Updated channels.");
}
$(document).ready(function() {
updateChannelInfo();
window.setInterval(updateChannelInfo, 20000);
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Raw
style.css
body {
font-family: Calibri;
}
#footer {
position:absolute;
bottom:0;
width:100%;
}
.streamstatus {
margin-left:10px;
}
.page {
width:600px;
margin:auto;
}
.titlebar {
width:100%;
/* background:#AEAEAE; */
padding:10px;
}
.channelinfo {
padding:5px;
}
.circle {
width:20px;
height:20px;
border-radius:20px;
font-size:10px;
color:#fff;
vertical-align: bottom;
margin-top:15px;
/* line-height:100px; */
/* text-align:right; */
}
.circle.online {
background: green;
}
.circle.offline {
background: red;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment