Twitch Streamers: Using Twitch.tv JSON API

In this example below you will see how to do a Twitch Streamers: Using Twitch.tv JSON API with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by rajatkantinandi, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rajatkantinandi ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!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");
      }
    });
  });
});

Comments