Twitch tv

index.html

<div class="container">
  <p>TwitchTv JSON API</p> 
  <a href="https://www.twitch.tv/freecodecamp" target=_blank>
    <div class="fcc">Free code camp is:</div></a>
  <form class="form-inline text-center">
    <input type="search"class="form-control" id= "inp" size="30" placeholder="search for user name" required>
    <button type="button"class="btn btn-default"> <span class="glyphicon glyphicon-search"></span>Search</button>
 
  
  <div class="rows">
    <div class="col-sm-4"></div> 
    <div class="col-sm-4 channelDisp">
     
       <div class="row1">
        <div class="col-sm-6">User Name</div>
        <div class="col-sm-6">Status</div> 
      </div>
      <div class="display">
      </div>
    </div> 
    <div class="col-sm-4 "></div> 
  </div>
  
</div>

script.js

 $(document).ready(function(){
   // freecode camp streaming
   var url1= 'https://api.twitch.tv/kraken/streams/freecodecamp';
   $.getJSON(url1,function(data){
     // the status of Free code camp
     if(data.stream==null){
       // the stream is offline
       $(".fcc").html("Free Code Camp is:OFFLINE");
       
     }
     else if(data.error){
       // the stream is not available
        $(".fcc").html("Free Code Camp is:NOT AVAILABLE");
     }
     else {
       // the stram is online
        $(".fcc").html("Free Code Camp is:ONLINE");
       
     }
     
   });
   // ---------END of Free code camp--------
   //displaying a series of streaming  
   
     var userAccounts=["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas","comster404","brunofin"];  
  userAccounts.forEach(chStreams => {  
    var logo ="",
        url="",
        status="",
        banner="";
 $.getJSON('https://api.twitch.tv/kraken/channels/'+chStreams, data => {      
      logo = data.logo;
      banner=data.profile_banner;
      url = data.url;
    });
    $.getJSON('https://api.twitch.tv/kraken/streams/'+chStreams, function(data) {
    if(data.stream == null){
      status="Offline";      
    }
      else if(data.error){
      status= "unavailable";
    } 
      else{
        status="online";
      }
      $(".display").prepend('<div class="row"><div class="col-sm-6"><a target="_blank" href="'+url+'"><img src="'+logo+'" height="80" width="80"><h4>'+ chStreams +'</h4></div><div class="col-sm-6"><h5>'+status+'</h5></div></div></a>')
  });    
  }); 
   
 });

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

.container{
  background-color:#F5B3B3;
  margin-top:25px;
  padding:2px;  
}
.container p {
  font-family: lobster;
  font-size: 40px;
  text-align: center;
  text-shadow:2px 2px;
}
.fcc{
   font-family: lobster;
  font-size: 20px;
  text-align: center;
  text-shadow:1px 1px Green;
  
}
.channelDisp{
  background-color:#F4EAEA;
  text-align:center; 
  
}
.row1{   
  font-size:16px;
  color:#F5BF2C; 
  
}
.rows{
  margin:15px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

Twitch tv.markdown

Twitch tv

A Pen by mohammedadem on CodePen.

License.