Twitch Streamers

index.html

<div class="container">

  <div class="section ">
    <div class="row ">
      <div class="col s12">
        <h2 class="center-align">Twitch Streamers</h2>
        <div class="center-align">
          <a class="waves-effect waves-light btn btall"><i class="material-icons left">video_library</i></a><a class="waves-effect waves-light btn btonline red"><i class="material-icons red">videocam</i></a><a class="waves-effect waves-light btn btoffline grey"><i class="material-icons">videocam_off</i></a></div>
        <div class="divider"></div>
        
        <div id="display">
  </div>
      </div>
    </div>
  </div>


</div>

script.js

var username = ["riotgames","freecodecamp", "terakilobyte", "habathcx", "OgamingSC2","RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff"];

function fetchInfo() {
  username.forEach(function(username) {

    function URL(type, username) {
      return 'https://api.twitch.tv/kraken/' + type + '/' + username + '?client_id=s64eucs6zuf4s1njzvzxm6gnqcdb60&callback=?';
    };

    var status,display,viewers,prop;
    
    $.getJSON(URL("streams", username), function(data) {

      

      if (data.stream == null) {
        status = '<i class="material-icons grey white-text vicon">videocam_off</i>';
        display="hidden";
        viewers="";
        prop="offline";
      } else {

        status = '<i class="material-icons red white-text vicon">videocam</i>';
        display="visible";
        viewers='<span class="vtext">'+data.stream.viewers+' viewers</span>';
        prop="online";
      }
    });

    $.getJSON(URL("channels", username), function(data) {

      var banner;
      if (data.profile_banner != null)
        banner = data.profile_banner;
      else
        banner = "http://cdn.gamerant.com/wp-content/uploads/Twitch-logo.jpg";

      var name;
      var description;
      if(data.display_name!=="undefined ")
       { name=data.display_name;
      description = data.status;
       }
      else
        {
        name="<i>Account Closed</i>"
        description = "";
        }
      

      html = '<div class=" row col s12 '+prop+'"><div class="card"><div class="card-image waves-effect waves-block waves-light" id="icon"><img src="' +
        banner + '" class="logo"></div><div class="card-content" id="name"><span class="card-title activator grey-text text-darken-4">'+name+'<i class="material-icons right '+display+'">more_vert</i></span><br/><span class="grp">' + status + ' '+viewers+'</span> <p><a href="' +
        data.url + '" target="_blank">' +
        name + '</a></p></div><div class="card-reveal" id="streaming">' + '<span class="card-title grey-text text-darken-4">' + description + '<i class="material-icons right">close</i></span><p>'+ description +'</p></div></div></div>';
      $("#display").append(html);

    });

  });

};

$(document).ready(function() {
  fetchInfo();
  $('.btall').on("click", function() {
	$('.online').show();
	$('.offline').show();
});
  $('.btonline').on("click", function() {
	$('.online').show();
	$('.offline').hide();
});
$('.btoffline').on("click", function() {
	$('.offline').show();
	$('.online').hide();
});
});

scripts

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

style.css

.container {
      min-width: 300px!important;
}

.hidden {
  display:none!important;
}
.vicon {
  font-size: 20px!important;
    vertical-align: middle;
}

.vtext {
  font-size: 16px;
    vertical-align: middle;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

twitch-streamers.markdown

Twitch Streamers

A Pen by Jubin Ayoob N V on CodePen.

License.