<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Twitch Streamers: Using Twitch.tv JSON API</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="app container-fluid">
<h1 class="text-center">Twitch Streamers</h1>
<h4 class="text-center">
Show: <input type="radio" value="all" name="show" checked/> all |
<input type="radio" value="online" name="show"/> online |
<input type="radio" value="offline" name="show"/> offline
</h4>
<div class="streamers">
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/rajatkantinandi/twitch-streamers-using-twitchtv-json-api-vWBKbo */
.online{
padding:0px 10px 20px 10px;
border:1px solid green;
margin-top:20px;
border-radius:20px;
background:linear-gradient(to right,#dfd,#fff,#cfc);
}
.offline{
padding:0px 10px 20px 10px;
border:1px solid red;
margin-top:20px;
margin-left:10px;
border-radius:20px;
background:linear-gradient(to right,#fdd,#fff,#fcc);
}
.user{
padding:0px 10px 10px 5px;
border:1px solid grey;
font-size:15px;
margin-bottom:10px;
margin-right:10px;
border-radius:10px;
background-color:#ddf;
}
.user p img{
width:120px;
}
/*Downloaded from https://www.codeseek.co/rajatkantinandi/twitch-streamers-using-twitchtv-json-api-vWBKbo */
$(document).ready(function(){
var users=["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var online=[];
var clientID="wcipxjufwt0gtlyfysf6khxj9ejub7";
var address="https://api.twitch.tv/kraken/streams/?channel=";
var disp="";
for(var i=0;i<users.length-1;i++){
address+=users[i]+",";
}
address+=users[users.length-1]+"&client_id="+clientID;
$.getJSON(address,function(data){
if(data._total>0){
disp+="<div class='online col-sm-6'><h2 class='text-center'>Online</h2>";
for(var i=0;i<data._total;i++){
disp+="<div class='user'><a href='https://twitch.tv/"+data.streams[i].channel.display_name+"' target='_blank'><h3><img class='img-circle' src='"+data.streams[i].channel.logo+"' width='35px'/> "+data.streams[i].channel.display_name+"</h3></a><p class='row'><img src='"+data.streams[i].preview.large+"' class='col-xs-4' width='60px'/><span class='col-xs-8'>"+data.streams[i].channel.status+"</span></p></div>";
online[i]=data.streams[i].channel.display_name;
}
disp+="</div>";
for(var i=0;i<online.length;i++){
users.splice(users.indexOf(online[i]),1);
}
disp+="<div class='offline col-sm-5'><h2 class='text-center'>Offline</h2>";
for(var i=0;i<users.length;i++){
disp+="<div class='col-md-1'></div><div class='user col-md-5'><a href='https://twitch.tv/"+users[i]+"' target='_blank'><h4><i class='fa fa-user-circle-o'></i> "+users[i]+"</h4></a></div>";
}
disp+="</div>";
$(".streamers").html(disp);
}
$( "input[type=radio]" ).on( "click",function(){
if($( "input:checked" ).val()=="online"){
$(".online").css("display","block");
$(".online").addClass("col-sm-12").removeClass("col-sm-6");
$(".offline").css("display","none");
}
else if($( "input:checked" ).val()=="offline"){
$(".offline").css("display","block");
$(".offline").addClass("col-sm-12").removeClass("col-sm-5");
$(".online").css("display","none");
}
else if($( "input:checked" ).val()=="all"){
$(".offline").css("display","block");
$(".online").css("display","block");
$(".online").addClass("col-sm-6").removeClass("col-sm-12");
$(".offline").addClass("col-sm-5").removeClass("col-sm-12");
}
});
});
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Font Awesome
Twitter Bootstrap
jQuery
v3.2.1
