html twitch api boot

Posted 2021-05-11

twitch api boot
---------------


A [Pen](https://codepen.io/renx777/pen/RammQx) by [Renuka Prasad A](https://codepen.io/renx777) on [CodePen](https://codepen.io).

[License](https://codepen.io/renx777/pen/RammQx/license).

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

img{
    height:50px;
   width:50px; 
    margin-left:5px;
   
  border-radius:50%;
    margin-bottom:10px;
  }
  
  
  
  
  
  
  
  a{
   text-align:center;
   
    color:black;
  }
  a:hover{
   color:;
  }
  i{
   font-size:60px; 
    display:block;
   
  }
  
  span{
   
    display:block;
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  
  .tit{
    
    color:white;
    
    
    background-color: #06A2CB;
  }
  
  .offliners{
  background-color:#9BD1FA;
    margin-top:10px;
  }
  .onliners{
    background-color:#B0E57C;
    margin-top:10px;
  }
  body{
  background-color:white;
    font-family:lobster;
    font-size:17px;
    
  }
  
  .btn{
    color:white;
    background-color:transparent;
   border:1px solid white;
    font-size:20px;
    margin-left:20px;
    margin-right:5px;
    width:70px;
    margin-bottom:5px;
    display:block;
    float:right;
  }
  .btn:hover{
    color:yellow;
    border:1px solid yellow;
    transition:0.1s;
    
  }
  .btn:active{
    color:white;
  }
  i:hover{
    color:yellow;
    transition:3s;
  }
  .col-md-4{
    margin-top:12px;
  }
  .col-md-2{
    margin-top:5px;
    
  }
  
  .col-md-6{
    margin-top:11px;
  }
  
  .container{
    width:90%;
    
  }
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

$(document).ready(function(){
 

  
var usernames=["freecodecamp","Hiko","Krepo", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff","cretetion","OgamingSC2","ESL_SC2","brunofin"];

var offliners=[];
var onliners=[];

console.log(usernames.length)
 $.each(usernames,function(index,value){
     
    $.getJSON("https://wind-bow.gomix.me/twitch-api/channels/" + value+ "?callback=?",function(x) {
      
     
      
      console.log(x)
      
      var purl=x.logo;
      var idx=value;
      var ids="s"+value;
      
      if(x.logo==null){
        purl="https://goo.gl/bKCtSo";
      }
      if(x.status==422){
        x.url="";
        x.display_name=value;
        purl="https://goo.gl/0xOVpk";
      }
      var j;
     
      
      
     $.getJSON( "https://wind-bow.gomix.me/twitch-api/streams/" + value+ "?callback=?",function(c) {
     var j;
          if (c.status) {
         j="Account closed"
         }
         else  if(c.stream==null && c.status !=422){
        j="Offline"
      }
      else  {
          
        j=c.stream.game+":"+c.stream.channel.status;
             
        }
          
          if(c.stream==null || c.stream==undefined){
             $('.all').append('<div class="container">'+'<div class="offliners">'+'<div class="row">'+'<div class="col-md-2 col-sm-12 col-xs-12">'+'<img src='+purl+'></img>'+'</div>'+'<div class="col-md-4 col-sm-12 col-xs-12 ">'+'<a href='+x.url+'>'+x.display_name+'</a>'+'</div>'+'<div class="col-md-6 col-sm-12 col-xs-12 ">'+'<span id>'+j +'</span>'+'</div></div></div>')
            }
          else{
             $('.all').prepend('<div class="container">'+'<div class="onliners">'+'<div class="row">'+'<div class="col-md-2 col-sm-12 col-xs-12">'+'<img src='+purl+'></img>'+'</div>'+'<div class="col-md-4 col-sm-12 col-xs-12 ">'+'<a href='+x.url+'>'+x.display_name+'</a>'+'</div>'+'<div class="col-md-6 col-sm-12 col-xs-12 ">'+'<span id>'+j +'</span>'+'</div></div></div>')
            }
       
     
     });
     
    
       
      
      
     
      
      
 
    });

  
 
  });

 
    
          

    
 
   
  
 
 $('#on').on('click',function(){
    $('.offliners').hide()
    $('.onliners').show()
   
 }) 
 
  $('#off').on('click',function(){
    $('.offliners').show()
    $('.onliners').hide()
 }) 
 $('#all').on('click',function(){
   $('.onliners').show();
   $('.offliners').show();     
 });
   
});

function growl(dxs){
  var d=dxs;
  console.log(d);
   $.getJSON("https://api.twitch.tv/kraken/streams/"+d+".json?callback=?",function(x) {
     console.log(x.stream);
     
     
   })
}

<body>

  <div class="container">
    <div class="tit">
      <div class="row">
        <div class="col-sm-12 col-xs-12 col-md-12">

          <i>Twitch streamers</i>


        </div>
        <div class="col-sm-12 col-xs-12 col-md-12">

          <button class="btn" id="on">online</button>
          <button class="btn" id="off">offline</button>
          <button class="btn" id="all">all</button>

        </div>
      </div>
    </div>

  </div>
  <div class="all">

  </div>

  <script>
    $(document).ready(function () {
      $('[data-toggle="tooltip"]').tooltip();
    });
  </script>
</body>