JavaScript: Use the TwitchTV JSON API

Demo: https://codepen.io/dragoncoin/pen/Zebwvq

HTML Code:

<div class="container">
<div class="row" id="header">
<h1>Selected Twitch Streamers</h1>
<div class="menu">
<div class="selector active" id="all">
<div class="circle"></div><p>All</p>
</div>
<div class="selector" id="online">
<div class="circle"></div><p>Online</p>
</div>
<div class="selector" id="offline">
<div class="circle"></div><p>Offline</p>
</div>
</div>
</div>
<div id="display"></div>
<div class="row" id="footer">Another Project by a Student of Free Code Camp!</div>
</div>

CSS Code:

body {
background-image: url("http://www.sportscastermagazine.ca/wp-content/uploads/sites/26/2016/12/RG-Header-1920x1080.jpg");
font-family: "Garamond";
font-size: 14px;
// color: white;
}

a, a:focus, a:hover, a:visited {
color: white;
}

h1 {
font-family: 'Garamond';
font-weight: bold;
text-transform: uppercase;
text-align: right;
margin: 15px 0px;
font-size: 30px;
}

.container {
background-color: grey;
margin: 0px auto;
padding: 0px;
max-width: 700px;
border-radius: 20px;
}

.row {
margin: 2px 0px;
padding: 5px;
line-height: 50px;
}

.menu {
position: absolute;
left: 10px;
bottom: 5px;
color: black;
font-family: 'Garamond';
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
#all {
.circle{
background-color: brown;
}
}
#online {
.circle {
background-color: green;
}
}
#offline {
.circle {
background-color: red;
}
}
.active, .selector:hover {
width: 65px !important;
// transition: $grow;
cursor: pointer;
}
.selector {
line-height: 20px;
height: 20px;
background-color: white;
padding: 0px 5px;
margin: 2px 0px;
width: 20px;
overflow: hidden;
float: left;
clear: left;
border-radius: 5px;
// transition: $grow;
.circle {
height: 10px;
width: 10px;
border-radius: 50%;
background-color: white;
border: 1px solid black;
float: left;
margin: 5px 5px 5px 0px;
}
p {
float: right;
margin: 0px;
}
}
}

#header, #footer {
position: relative;
background-color: grey;
color: white;
border-radius: 20px;
height: 80px;
}

#footer{
font-size: 24px;
text-align: right;
padding-right: 20px;
}
.logo {
max-width: 50px;
max-height: 50px;
border-radius: 50%;
border: 3px solid grey;
}

.offline {
background-color: maroon;
color: white;
}

.online {
background-color: darkolivegreen;
a, a:focus, a:hover, a:visited {
color: white;
}
}

#streaming {
font-style: italic;
color: white;
}

#name, #streaming {
line-height: 25px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
color: white;
}

@media (min-width: 768px) {
.container {
margin: 10px auto;
border-radius: 20px;
}

#name, #streaming {
line-height: 50px;
height: 50px;
}

#header {
padding-right: 20px;
}
}

JavaScript Code:

// This project ought to be discontinued. There's no point in working with broken APIs 
var channels = ["freecodecamp","test_channel","ESL_SC2","dragoncoin1","ESL_SC2", "OgamingSC2", "cretetion", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

function getChannelInfo() {
channels.forEach(function(channel) {
function makeURL(type, name) {
return 'https://wind-bow.gomix.me/twitch-api/' + type + '/' + name + '?callback=?';
};
$.getJSON(makeURL("streams", channel), function(data) {
var game,
status;
if (data.stream === null) {
game = "Offline";
status = "offline";
} else if (data.stream === undefined) {
game = "Account Closed";
status = "offline";
} else {
game = data.stream.game;
status = "online";
};
$.getJSON(makeURL("channels", channel), function(data) {
var logo = data.logo != null ? data.logo : "https://dummyimage.com/50x50/ecf0e7/5c5457.jpg&text=0x3F",
name = data.display_name != null ? data.display_name : channel,
description = status === "online" ? ': ' + data.status : "";
html = '<div class="row ' +
status + '"><div class="col-xs-2 col-sm-1" id="icon"><img src="' +
logo + '" class="logo"></div><div class="col-xs-10 col-sm-3" id="name"><a href="' +
data.url + '" target="_blank">' +
name + '</a></div><div class="col-xs-10 col-sm-8" id="streaming">'+
game + '<span class="hidden-xs">' +
description + '</span></div></div>';
status === "online" ? $("#display").prepend(html) : $("#display").append(html);
});
});
});
};

$(document).ready(function() {
getChannelInfo();
$(".selector").click(function() {
$(".selector").removeClass("active");
$(this).addClass("active");
var status = $(this).attr('id');
if (status === "all") {
$(".online, .offline").removeClass("hidden");
} else if (status === "online") {
$(".online").removeClass("hidden");
$(".offline").addClass("hidden");
} else {
$(".offline").removeClass("hidden");
$(".online").addClass("hidden");
}
})
});

Leave a Reply

Your email address will not be published. Required fields are marked *