Twitch User Status

index.html

<link href='https://fonts.googleapis.com/css?family=Play&effect=neon|emboss|3d-float' rel='stylesheet' type='text/css'>
<div class="container-fluid nopadding">
  <nav class="navbar navbar-inverse navbar-fixed-top topnav" role="navigation">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toggle-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand font-effect-neon" target=_blank href="http://codepen.io/rfprod"><span class="glyphicon glyphicon-wrench"></span> RFProd</a>
    </div>
    <div class="collapse navbar-collapse" id="toggle-nav">
      <div class="container-fluid"> 
        <ul class="nav navbar-nav navbar-right font-effect-emboss">
          <li class="nav-tabs"><a href="#twitchstatus"><span class="glyphicon glyphicon-globe" ></span> TWITCH STATUS</a></li>
          <li class="nav-tabs"><a href="https://gist.github.com/rfprod/f2fa7e70d04ff21076ba" target=_blank><span class="glyphicon glyphicon-download-alt" ></span> GIST</a></li>
        </ul>
      </div>
    </div>

  </nav>
  <a name="twitchstatus"></a>
  <div class="home sect">
    <div class="container-fluid">
      <div class="col-md-12">
        <p class="actions">
          <a class="bouncer everyone font-effect-neon" href="#"><img class="pictogram" src="http://cdn.flaticon.com/svg/32/32441.svg" title="everyone"/><br>Everyone
          </a>
          <a class="bouncer online font-effect-neon" href="#"><img class="pictogram" src="http://cdn.flaticon.com/svg/71/71043.svg" title="who's online"/><br>Online
          </a>
          <a class="bouncer offline font-effect-neon" href="#"><img class="pictogram" src="http://cdn.flaticon.com/svg/66/66585.svg" title="who's offline"/><br>Offline 
          </a>
        </p>
        <div class="input-group input-group-sm">
          <span class="input-group-addon" id="sizing-addon3"><span class="glyphicon glyphicon-search"></span></span>
          <input type="text" class="form-control srch" placeholder="Username" aria-describedby="sizing-addon3" id="user-search" oninput="searchUsers();">
        </div>
        <p class="output font-effect-3d-float">
          Status output
        </p>
        <span class="credits font-effect-3d-float">credits <a href="https://github.com/justintv/Twitch-API" target=_blank>twitch api</a> - <a href="http://www.flaticon.com/authors/freepik" target=_blank>flaticon</a> - <a href="http://backgrounds.mysitemyway.com/" target=_blank>mysitemyway</a><br>licence <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" target=_blank>GPL 3.0</a></span>
      </div>
    </div>
  </div>
</div>

script.js

var output = "";
var outputErrorMessage = "";
var outputUserStream = "";
var usernamesArr = ["freecodecamp", "storbeck", "comster404", "terakilobyte", "habathcx","robotcaleb", "callofdutybravo","thomasballinger","noobs2ninjas","beohoff","brunofin"];
var channelExistsImg = "http://cdn.flaticon.com/svg/13/13792.svg";
var channelDoesntExistImg = "http://cdn.flaticon.com/svg/24/24984.svg";
var offlineImg = "http://cdn.flaticon.com/svg/16/16096.svg";
var onlineImg = "http://cdn.flaticon.com/svg/72/72342.svg";

$(document).ready(function(){
  for (var z=0;z<usernamesArr.length;z++){
    output += "<div class='list-group'>";
    getTwitchData(usernamesArr[z],usernamesArr,z);
  }
});

function getTwitchData(getUser,usernamesArr,z){
    var outputUserDisplayName = "";
    var userNameForUrl = "";
    var outputUserLogo = "";
    var outputUserLogo = "";
    var outputUserBio = "";
    var UserSelfLink = "";
  $.getJSON("https://api.twitch.tv/kraken/users/"+getUser, function(json){
    var jsonKeys = Object.keys(json);
    //alert(jsonKeys);
    var data = "";
    var i = 0;
      for (var property in json) {
        var property = jsonKeys[i];
        if (json.hasOwnProperty(property)) {
          data = json[property];
          if (typeof data === 'object'){
            //alert(JSON.stringify(data));
            /*
            if (property === '_links'){
              var dKeys = Object.keys(data);
              UserSelfLink = data["self"];
            }
            */
          }
          if (property === 'display_name'){
            outputUserDisplayName = data;
          }
          if (property === 'name'){
            userNameForUrl = data;
          }
          if (property === 'logo'){
            outputUserLogo = data;
          }
          if (property === 'bio'){
            outputUserBio = data;
          }
        }
        i++;
      }
      output += "<a  id='"+userNameForUrl+"-profile' href='http://www.twitch.tv/"+userNameForUrl+"' class='list-group-item profile' target=_blank>"+"<div class='media'><div class='media-left media-top'><img class='media-object userpic' src='"+outputUserLogo+"' alt='user logo'/></div><div class='media-left'><img class='media-object userstream' id='"+userNameForUrl+"-channel' src='http://123' alt='user channel'/><img class='media-object userstream' id='"+userNameForUrl+"-stream' src='http://123' alt='user stream'/></div><div class='media-body'><h4 class='media-heading'>"+outputUserDisplayName+"</h4><p class='bio'>"+outputUserBio+"</p></div></div></a>";
    if (z === usernamesArr.length-1){
      output += "</div>";
      $(".output").html(output);
      getStreams(usernamesArr);
    }
  });
  $(".bouncer").addClass("animated bounce");
  $(".everyone").click(function(){filterUsers(usernamesArr,"everyone");});
  $(".online").click(function(){filterUsers(usernamesArr,"online");});
  $(".offline").click(function(){filterUsers(usernamesArr,"offline");});
}

function getStreams(usernamesArr){
  for (var x=0;x<usernamesArr.length;x++){
    getStream(usernamesArr[x]);
  }
}

function getStream(usr){
  $.getJSON("https://api.twitch.tv/kraken/streams/"+usr, function(json){
    //alert(JSON.stringify(json));
    var outputUserStream = "";
    var outputErrorMessage = "";
    var jsonKeys = Object.keys(json);
    var data = "";
    var i = 0;
    for (var property in json) {
      var property = jsonKeys[i];
      if (json.hasOwnProperty(property)) {
        data = json[property];
        if (property === 'stream'){
          outputUserStream = data;
        }
      }
      i++;
    }
  })
  .then(function(value){
    //alert(JSON.stringify(value));
    var divUserChannel = "#"+usr+"-channel";
    var divUserStream = "#"+usr+"-stream";
    //alert($(divName).attr("src"));
    $(divUserChannel).attr("src",channelExistsImg);
    if (value["stream"] != null){
      $(divUserStream).attr("src",onlineImg);
    }else{
      $(divUserStream).attr("src",offlineImg);
    }
  },function(reason){
    //alert(JSON.stringify(reason));
    var divUserChannel = "#"+usr+"-channel";
    var divUserStream = "#"+usr+"-stream";
    $(divUserChannel).attr("src",channelDoesntExistImg);
    $(divUserStream).attr("src",offlineImg);
  });
}

function filterUsers(usernames,filter){
  for (var k=0;k<usernames.length;k++){
    var divUserProfile = "#"+usernames[k]+"-profile";
    var divUserStream = "#"+usernames[k]+"-stream";
    if (filter == "everyone"){
      $(divUserProfile).show();
    }
    if (filter == "online"){
      if ($(divUserStream).attr("src") == offlineImg){
        $(divUserProfile).hide();
      }else{
        $(divUserProfile).show();
      }
    }
    if (filter == "offline"){
      if ($(divUserStream).attr("src") == onlineImg){
        $(divUserProfile).hide();
      }else{
        $(divUserProfile).show();
      }
    }
  }
}

function searchUsers(){
  var inputString = document.getElementById("user-search").value;
  for (var k=0;k<usernamesArr.length;k++){
    var divUserProfile = "#"+usernamesArr[k]+"-profile";
    var userProfileName = divUserProfile.substring(0,divUserProfile.length-8);
    if (userProfileName.includes(inputString)){
      $(divUserProfile).show();
    }else{
      $(divUserProfile).hide();
    }
  }
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

.home {background: transparent url('http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/740/full/grungy-watercolor-textures-2.jpg') fixed center top / cover;min-height: 100vh;height: auto !important;margin-top: 0.95em;}
.nopadding {padding: 0;}
body {color:#ffffff; font-family: 'Play', sans-serif;font-size: 2.2em;}
.navbar-brand {font-size: 1em;}
.img-border {border-radius: 50%;height: 40vh;}
.sect {padding-top: 2vh;}
.social-btn-blk {background-color: #000000;}
.social-btn-wht {background-color: #ffffff;}
.img-fit{width:100%;}
.trigger{dispay:block;text-align:center;}
.actions{text-align:center;}
.actions a{display:inline-block;text-decoration:none;margin-right:7vw;}
h2{text-align:center;margin-top:4vh;}
p{margin-top:2vh;}
.credits{display:block;text-align:center;font-size:0.75em;}
.credits a:hover{text-decoration:none;}
.output{text-align:center;}
.output a{color:#ffffff;}
.output a:hover{text-decoration:none;}
.profile{background:transparent;}
.profile:hover{background:#ffffff;color:#000000;}
.pictogram{width:3em;height:auto !important;margin-top:2vh;}
.userpic{width:3em;height:auto !important; border-radius:50%;font-size:0.8em;}
.userstream{width:1.5em;height:auto !important;font-size:0.8em;}
.usrname{font-weight:bold;}
.bio{font-size:0.5em;font-weight:bold;}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />

TwitchUsersStatus.markdown

Twitch.tv Users Status

A Pen by V on CodePen.

License.