TV Twitch Viewer

In this example below you will see how to do a TV Twitch Viewer with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mykatz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mykatz ©
  • HTML
  • CSS
  • JavaScript
    <div class="container pt-4">
  <div class="row"> 
    <div class="col-md-2"> </div>
    <div class="col-md-8  mainbox"> 
    <div class="row">
      <div class="col-md-4">
      <img src="https://my.mixtape.moe/accvlj.png" class="img-fluid">
      </div>
      <div class="col-md-4">
      
        <h1> Viewer </h1>
        
      </div>
      <div class="col-md-4 pt-4"> 
      <input id="slider2" type ="range" min ="0" max="2" step ="1" value ="0"/> <br>  
      | All | Online | Offline |
      </div> 
      
      
    </div>
    <ul class="list-group py-2" id="streamerslist">
      <li class="list-group-item">Loading..</li>
      
    </ul>
      
      
    </div>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/mykatz/tv-twitch-viewer-bRoRgg */
    body {
  background-color: #DFE2DB;
}

.mainbox {
  background-color: #FDF3E7;
  border-width: 1px;
  border-style: solid;
  border-color: white;
  color: #6441A4;
}

h1 {
  font-size: 4em;
  font-family: Righteous, sans-serif;
}


/*Downloaded from https://www.codeseek.co/mykatz/tv-twitch-viewer-bRoRgg */
     $.ajaxSetup({
   async: false
 });

var streams = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas","brunofin"];
window.success = false;
window.current = "";


$(document).ready(function() {
  
  function checkStatus(streamer){
     var status = "";
     $.getJSON("https://wind-bow.glitch.me/twitch-api/channels/"+streamer,function(json) {
        status = json["status"];
      });
     return status;
  }
  
  function updateStreams(j, streams){
  $("#streamerslist").html("");
    
    for(var i=0;i<streams.length;i++) {
      current = streams[i];
     // alert(current);
      
      if(checkStatus(current) == 404 && j == 0) {$("#streamerslist").append('<li class="list-group-item bg-warning animated fadeInLeft">'+current+"(user not found) </li> ");}
      else{
        $.getJSON("https://wind-bow.glitch.me/twitch-api/streams/"+current, function(json) {
          if(json["stream"] == null && j!=1) {
            $("#streamerslist").append('<a target="_blank" href="http://twitch.tv/'+current+'"</a>'+'<li class="list-group-item bg-danger animated fadeInLeft">'+current+"</li> ");
          }
          else if(j != 2){
            $("#streamerslist").append('<a target="_blank" href="http://twitch.tv/'+current+'"</a>'+'<li class="list-group-item bg-success animated fadeInLeft">'+current+"  Streaming:  "+ json["stream"]["game"] +"</li> ");
          }
        });
      }
    }
    
    
  
}  
 
  updateStreams(0,streams);
  
  
  
  
  
  $("#slider2").on("click", function() {
    updateStreams($("#slider2").val(),streams);
  });                
  
  
});

Comments