Twitchtv JSON API

Codepen, Twitchtv JSON API

HTML

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="animated bounceIn">
 <div class="header">
  <h1 class="title"> Twitch TV Streamers</h1>
  <nav class="navbar">
  <div class="container-fluid">
     <ul class="nav navbar-nav">
  <li><a class="navtext all" type="button">All</a></li>
  <li><a class="navtext online" type="button">Online</a></li>
  <li><a class="navtext offline" type="button">Offline</a></li>
  </ul>
  </div>
  </nav>
<div class="container-fluid">

 </div>
 <div class="streamers">
  
  <div class="streamerblock streamerblock0">
   <img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" class="profile0 profile img-circle">
   <a type="button" class="name0 name">Name</a>
   <p class="stream0 stream">Stream/Offline</p>
   <div class="line"></div>
  </div>
  
  <div class="streamerblock streamerblock1">
   <img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" class="profile profile1 img-circle">
   <a type="button" class="name name1">Name</a>
   <p class="stream stream1">Stream/Offline</p>
   <div class="line"></div>
  </div>
  
  <div class="streamerblock streamerblock2">
   <img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" class="profile profile2 img-circle">
   <a type="button" class="name name2">Name</a>
   <p class="stream stream2">Stream/Offline</p>
   <div class="line"></div>
  </div>
  
  <div class="streamerblock streamerblock3">
   <img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" class="profile profile3 img-circle">
   <a type="button" class="name name3">Name</a>
   <p class="stream stream3">Stream/Offline</p>
   <div class="line"></div>
  </div>
  
  <div class="streamerblock streamerblock4">
   <img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" class="profile profile4 img-circle">
   <a type="button" class="name name4">Name</a>
   <p class="stream stream4">Stream/Offline</p>
   <div class="line"></div>
  </div>
 
  <div class="streamerblock streamerblock5">
   <img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" class="profile profile5 img-circle">
   <a type="button" class="name name5">Name</a>
   <p class="stream stream5 ">Stream/Offline</p>
   <div class="line"></div>
  </div>
 
  <div class="streamerblock streamerblock6">
   <img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" class="profile profile6 img-circle">
   <a type="button" class="name name6"></a>
   <p class="stream stream6">Stream/Offline</p>
   <div class="line"></div>
  </div>
  
  <div class="streamerblock streamerblock7">
   <img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" class="profile profile7 img-circle">
   <a type="button" class="name name7">Name</a>
   <p class="stream stream7">Stream/Offline</p>
   <div class="line"></div>
  </div>
 </div>
 <footer>
  <div class="about">
   <p class="text-center abouttext">This is a project by Yaroslav Kolesnikov for <a type="button" class="fcc">Free Code Camp</a> 2016</p>
  </div>
 </footer>
</div>
</div>
</div>
</div>

CSS

body{
 background-color:#C6CAC1; 
}
.header{
 width:100%;
 background-color:#B2AAAA;
 text-align:center;
 border-radius:10px;
 margin:auto;
}
.title{
 padding-top:20px;
 font-family:Lato;
 color:#6441A5;
}
.myname{
 font-size:20px;
 color:#6441A5;
}
.navbar{
 margin:auto;
}
.streamers{
 width:100%;
 margin:auto;
 background:white;
 border-radius:10px;
 padding-bottom:20px;
  text-align: left;
}
nav{
 background-color:#6441A5;
 font-family:Lato;
}
.text{
 color:#6441A5;
 font-family:Lato;
}  
.abouttext{
  background-color:#B2AAAA;
  border-radius:10px;
 color:#6441A5;
 margin-top:20px;
}
.profile{
 border-radius:100%;
 width:70px;
 margin-top:2%;
 margin-bottom:2%;
 margin-left:2%;
}
.name{
 color:#6441A5;
 font-size:15px;
 display:inline-block;
}
.stream{
 color:#6441A5;
 font-size:15px;
 display:inline-block;
}
.line{
 width:100%;
 height:1px;
 background-color:#6441A5;
}

.navtext{
 font-size:1.5rem;
}

JS

var streamers =[ "freecodecamp","OgamingSC2", "RobotCaleb","brunofin12","noobs2ninjas","storbeck", "cretetion","habathcx","ESL_SC2"];
var offline;
var streamerurl;

$(document).ready(function(){
 function twitchstreamer(streamer,block){
  $.ajax({
   type: 'GET',
   url: 'https://api.twitch.tv/kraken/channels/' + streamer,
   headers: {
    'Client-ID': 'ttmj4g3n804793e2zkjpybb2grkgh3'
   },
   success: function(data) {
    console.log(data);
    
    $('.name' + block).html(data.display_name);

   
    var profilepic = data.logo;
    $('.profile' + block).attr("src", profilepic);

    $('.name' + block).click(function(){
     window.open('https://twitch.tv/'+streamer)
    })
   }
  })
 
  $.ajax({
   type: 'GET',
   url: 'https://api.twitch.tv/kraken/streams/' + streamer,
   headers: {
    'Client-ID': 'co9k9t8sd7pi3lq1p3jvc2oyaojbpf3'
   },
   success: function(idx) {
    console.log(idx);
    if(idx.stream === null){
     //Offline
     $('.stream' + block).html('Offline');
     $('.streamerblock' + block).addClass('channeloffline');
    }else{
    
     $('.stream' + block).html(idx.stream.channel.status);
     $('.streamerblock' + block).addClass('channelonline');
    }
   },
   error:function(err){
    //The channel does not exist
    console.log(err);
    $('.stream').html('This channel does not exist');
   }
  })
 }
 
 twitchstreamer(streamers[0],0);//1
 twitchstreamer(streamers[1],1);//2
 twitchstreamer(streamers[2],2);//3
 twitchstreamer(streamers[3],3);//4
 twitchstreamer(streamers[4],4);//5
 twitchstreamer(streamers[5],5);//6
 twitchstreamer(streamers[6],6);//7
 twitchstreamer(streamers[7],7);//8
 
 
 $('.all').click(function(){
  $('.channelonline').show();
  $('.channeloffline').show();
 })
 $('.online').click(function(){
  $('.channeloffline').hide();
  $('.channelonline').show();
 })
 $('.offline').click(function(){
  $('.channeloffline').show();
  $('.channelonline').hide();
 })
 
 $('.fcc').click(function(){
  openfcc();
 })
})

function openfcc(){
 window.open('https://freecodecamp.com');
}

See the Pen Twitchtv JSON API by YaroslavW (@YaroslavW) on CodePen.