Twitch

index.html

<div id="body">
  <h1 class='logo'>
  <img class="center" src="https://dl.dropboxusercontent.com/u/21809793/twitch_logo3.jpg">
  </h1>
  <div class="main-col">
    <div class="btn-group btn-group-justified btn-group-large" role="group">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default all-users">All</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default online-users">Online</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default offline-users">Offline</button>
      </div>
    </div>

    <input type="text" id="user-search" class="form-control" placeholder="Search for...">
    <div class="results"></div>
  </div>
</div>

script.js

$(function() {
  var userNames = ["freecodecamp", "syntag", "devwars", "teamspOOky","itshafu","trumpsc","telltale","rubcup","habathcx", "RobotCaleb", "noobs2ninjas","ESL_SC2", "OgamingSC2", "cretetion"],

    streamurl = "https://api.twitch.tv/kraken/streams/",
    userurl = "https://api.twitch.tv/kraken/users/",
    noLogo = "https://dl.dropboxusercontent.com/u/21809793/dairy-cow-300x300.jpg",
    offline = "</p></div><span class='fa fa-square-o'></span>",
    status,
    statusP,
    userDiv;

  function displayAllUsers(arr) {
    //add or remove active class from buttons
    $(".online-users, .offline-users").removeClass("active");
    $(".all-users").addClass("active");

    arr.forEach(function(user) {
      return $.getJSON(userurl + user + "/?callback=?", function(result) {
        $.getJSON(streamurl + user + "/?callback=?", function(data) {
          //check for logo
          if (result.logo === null) {
            result.logo = noLogo;
          }
          //check streaming status
          if (data.stream === null) {
            status = offline;
          } else {
            //get and shorten status
            statusP = data.stream.channel.status;
            statusP = statusP.substr(0, 33);
            status = "</br><span class='details'>" + statusP + "</span></p></div><span class='fa fa-check-square-o'></span>";
          }
          //create HTML
          userDiv = '<a href="http://twitch.tv/' + result.name + '"><div class="user-div"><img class="img-responsive img-rounded img-profile" title=' + result.display_name + ' src=' + result.logo + '><div class="text"><p class="display-name">' + result.display_name + status + '</div></a>';

          $(".results").append(userDiv);
        });
      });
    });
  }

  function displayOnlineUsers() {
    $(".all-users, .offline-users").removeClass("active");
    $(".online-users").addClass("active");

    userNames.forEach(function(user) {
      return $.getJSON(userurl + user + "/?callback=?", function(result) {
        $.getJSON(streamurl + user + "/?callback=?", function(data) {

          if (result.logo === null) {
            result.logo = noLogo;
          }
          if (data.stream !== null) {

            statusP = data.stream.channel.status;
            statusP = statusP.substr(0, 33);
            status = "</br><span class='details'>" + statusP + "</span></p></div><span class='fa fa-check-square-o'></span>";

            userDiv = '<a href="http://twitch.tv/' + result.name + '"><div class="user-div"><img class="img-responsive img-rounded img-profile" title=' + result.display_name + ' src=' + result.logo + '><div class="text"><p class="display-name">' + result.display_name + status + '</div></a>';

            $(".results").append(userDiv);
          }
        });
      });
    });
  }

  function displayOfflineUsers() {
    $(".all-users, .online-users").removeClass("active");
    $(".offline-users").addClass("active");

    userNames.forEach(function(user) {
      return $.getJSON(userurl + user + "/?callback=?", function(result) {
        $.getJSON(streamurl + user + "/?callback=?", function(data) {

          if (result.logo === null) {
            result.logo = noLogo;
          }
          if (data.stream === null) {

            status = offline;

            userDiv = '<a href="http://twitch.tv/' + result.name + '"><div class="user-div"><img class="img-responsive img-rounded img-profile" title=' + result.display_name + ' src=' + result.logo + '><div class="text"><p class="display-name">' + result.display_name + status + '</div></a>';

            $(".results").append(userDiv);
          }
        });
      });
    });
  }

  //user search
  var numKeyUp = 0,
    searchValue,
    searchFor = [],
    regex;
  $("#user-search").keyup(function(event) {
    searchValue = $("#user-search").val();
    if (searchValue.length === 0) {
      $(".results").empty();
      displayAllUsers(userNames);
    }
    if (searchValue.length > 1 && searchValue.length % 2 === 0) {
      searchFor = userNames.filter(function(name) {
        regex = new RegExp(searchValue.toLowerCase());
        return regex.test(name.toLowerCase());
      })
      $(".results").empty();
      displayAllUsers(searchFor);
    }
  });

  //Click Handlers
  $(".all-users").on("click", function() {
    $(".results").empty();
    displayAllUsers(userNames);
  })

  $(".online-users").on("click", function() {
    $(".results").empty();
    displayOnlineUsers();
  })

  $(".offline-users").on("click", function() {
    $(".results").empty();
    displayOfflineUsers();
  })

  //initial display
  displayAllUsers(userNames);
});

scripts

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

style.css

<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>

a,
a:hover {
  text-decoration: none;
}
img.center {
  display: block;
  margin: 0 auto;
}
.main-col {
  max-width: 400px;
  margin: auto;
  padding: 0 5px 0 5px;
}

.user-div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: space-around;
  align-items: center;
  padding: 10px;
  color: #333;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}

.user-div:hover {
  background-color: #e6e6e6;
}

.text {
  order: 0;
  flex: 0 1 auto;
  align-self: center;
  font-size: 24px;
  text-align: left;
  width: 60%;
}

.display-name {
  font-size: 18px;
  color: #6542A6;
}

.details {
  font-size: 12px;
  letter-spacing: initial;
}

.user-div .fa {
  order: 0;
  flex: 0 1 auto;
  align-self: center;
  font-size: 24px;
  color: #6542A6;
}
.img-profile {
  order: 0;
  flex: 0 1 auto;
  align-self: center;
  width: 40px;
  margin-right: 5px;
}

.btn-group .btn {
  border-radius: 4px 4px 0 0;
  height: 50px;
}

.form-control {
  border-radius: 0;
  border-top: none;
  height: 40px;
}

styles

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

Twitch.markdown

Twitch

A Pen by Veronica Highsmith on CodePen.

License.