Twitch.tv JSON API

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

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

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Twitch.tv JSON API</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 text-center">
      <svg class="tw-svg__asset tw-svg__asset--logotwitch tw-svg__asset--inherit" width="94px" height="32px" version="1.1" viewBox="0 0 94 32" x="0px" y="0px"><path clip-rule="evenodd" d="M88,5h-6V0h-9l-6,5h-5.5L59,7.5V5h-5V0H36v5H16l-5-5H0v22l5,5.25L14,32h6v-1.5l3,1.5h12l2-3l1,3h7v-3l3,3h8l0.5-3l2.5,3h10l3-3v3h4l3-3v3h7l7-6V10L88,5z M13,13H8v6h5v6H6l-4-4V2h6v5h5V13z M36,21.5L32.5,25H15V7h6v12h2V7h6v12h2V7h5V21.5z M44,25h-6V7h6V25z M44,5h-6V2h6V5z M57,13h-5v6h5v6h-7l-4-4V2h6v5h5V13z M72,13h-7v6h7v6h-9l-4-4V11l4-4h9V13z M91,25h-6V13h-5v12h-6V2h6v5h7l4,4V25z" fill-rule="evenodd"></path></svg>
      <h1 class="header">Twitch Streamers</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 text-center">
      <button class="btn btn-primary btn-block" id="allButton">All Streamers</button>
    </div>
    <div class="col-xs-4 text-center">
      <button class="btn btn-info btn-block" id="onlineButton">Online</button>
    </div>
    <div class="col-xs-4 text-center">
      <button class="btn btn-info btn-block" id="offlineButton">Offline</button>
    </div>
  </div>
  <div id="results">
    <div id="online"></div>
    <div id="offline"></div>
    <div id="notFound"></div>
  </div>
  <div class="row footer-row">
    <div class="col-12-xs text-center">
      <h5 class="header">Coded by Conor Hinchee</h5>
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/twitchtv-json-api-ezZqKQ */
body{
   background-color : #FFD3F8;
   padding-top: 10%;
}
.header{
  font-family: 'Abril Fatface', cursive;
/*   color: white; */
}
.footer-row{
  padding-top: 5%;
  position:relative;
  bottom:0;
}
.logo{
  width: 25%;
  border-radius: 100%;
  border: 5px solid black;
}

/*Downloaded from https://www.codeseek.co/captnstarburst/twitchtv-json-api-ezZqKQ */
$(document).ready(function(){
  var profiles = ["freecodecamp", "captnstarburst", "TheJustinFlynn", "deadmau5", "KingGothalion", "FreePhillipe", "brunofin", "comster404", "RobotCaleb", "noobs2ninjas", "mithrain"];
  
  for(let counter=0; counter< profiles.length; counter++){
    (function(counter){
      let html = "";
      
      $.getJSON('https://wind-bow.gomix.me/twitch-api/channels/' + profiles[counter] + '?callback=?', function(data){
        
        if(data.error){
           html = "<div class='row'><div class='col-xs-4'><h4 class='header'>"+ profiles[counter] +"</h4></div><div class='col-xs-8 text-center'><h4>"+ data.message +"</h4></div></div>";
           $("#notFound").append(html);
        }else if(data.game === null){
          html ="<div class='row'><div class='col-xs-2'><img class='img img-responsive logo' src='"+ data.logo +"'/></div><div class='col-xs-2'><h4 class='header'>"+ profiles[counter] +"</h4></div><div class='col-xs-8 text-center'><h4>Offline</h4></div></div>";
          $("#offline").append(html);
        }else{
          html ="<div class='row'><div class='col-xs-2'><img class='img img-responsive logo' src='"+ data.logo +"'/></div><div class='col-xs-2'><h4 class='header'>"+ profiles[counter] +"</h4></div><div class='col-xs-8 text-center'><h4>"+ data.game +"</h4></div></div>";
          $("#online").append(html);
        }
      });
      
    })(counter);
  }
});  

function buttonHighlight(id){
  switch(id){
    case "allButton":
                      $("#allButton").removeClass("btn-info");
                      $("#allButton").addClass("btn-primary");
                      $("#onlineButton").removeClass("btn-primary");
                      $("#onlineButton").addClass("btn-info");
                      $("#offlineButton").removeClass("btn-primary");
                      $("#offlineButton").addClass("btn-info");
                      break;
      
    case "onlineButton":
                      $("#onlineButton").removeClass("btn-info");
                      $("#onlineButton").addClass("btn-primary");
                      $("#allButton").removeClass("btn-primary");
                      $("#allButton").addClass("btn-info");
                      $("#offlineButton").removeClass("btn-primary");
                      $("#offlineButton").addClass("btn-info");
                      break;
      
    case "offlineButton":
                      $("#offlineButton").removeClass("btn-info");
                      $("#offlineButton").addClass("btn-primary");
                      $("#allButton").removeClass("btn-primary");
                      $("#allButton").addClass("btn-info");
                      $("#onlineButton").removeClass("btn-primary");
                      $("#onlineButton").addClass("btn-info");
                      break;
  }
}

$("#allButton").click(function(){
  buttonHighlight(this.id);
  $("#online").show();
  $("#offline").show();
  $("#notFound").show();
});

$("#onlineButton").click(function(){
  buttonHighlight(this.id);
  $("#online").show();
  $("#offline").hide();
  $("#notFound").hide();
});

$("#offlineButton").click(function(){
  buttonHighlight(this.id);
  $("#online").hide();
  $("#offline").show();
  $("#notFound").hide();
});

Comments