Twitch TV helper

index.html

<div class="fixed-width center-block">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <a id="show-all" class="btn btn-header" role="button">All</a>
    </div>
    <div class="btn-group">
      <a id="show-online" class="btn btn-header" role="button">Online</a>
    </div>
    <div class="btn-group">
      <a id="show-offline" class="btn btn-header" role="button">Offline</a>
    </div>
  </div>
  <!-- Adding the filtering search bar-->
  <div class="input-group">
    <span class="input-group-btn">
      <button class="btn" type="button">
       <i class="glyphicon glyphicon-search" aria-hidden="true"></i>
      </button>
    </span>
     <input type="text" class="form-control" placeholder="username" id="searchForm">
  </div>

  <!-- List of people that are streaming to be displayed -->
  <div class="list-items">
  <ul class="list-unstyled" id="people">
    <div id="list-container">
      <li class="person-item" id="item0">
        <a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
          <img class="img-circle" src="">
          <div class="profile-name"></div>
          <div class="stream-info"></div>
        </a>
      </li>
      <li class="person-item" id="item1">
        <a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
          <img class="img-circle" src="">
          <div class="profile-name"></div>
          <div class="stream-info"></div>
        </a>
      </li>
      <li class="person-item" id="item2">
        <a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
          <img class="img-circle" src="">
          <div class="profile-name"></div>
          <div class="stream-info"></div>
        </a>
      </li>
      <li class="person-item" id="item3">
        <a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
          <img class="img-circle" src="">
          <div class="profile-name"></div>
          <div class="stream-info"></div>
        </a>
      </li>
      <li class="person-item" id="item4">
        <a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
          <img class="img-circle" src="">
          <div class="profile-name"></div>
          <div class="stream-info"></div>
        </a>
      </li>
      <li class="person-item" id="item5">
        <a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
          <img class="img-circle" src="">
          <div class="profile-name"></div>
          <div class="stream-info"></div>
        </a>
      </li>
      <li class="person-item" id="item6">
        <a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
          <img class="img-circle" src="">
          <div class="profile-name"></div>
          <div class="stream-info"></div>
        </a>
      </li>
      <li class="person-item" id="item7">
        <a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
          <img class="img-circle" src="">
          <div class="profile-name"></div>
          <div class="stream-info"></div>
        </a>
      </li>
      <li class="person-item" id="item8">
        <a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
          <img class="img-circle" src="">
          <div class="profile-name"></div>
          <div class="stream-info"></div>
        </a>
      </li>
      <li class="person-item" id="item9">
        <a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
          <img class="img-circle" src="">
          <div class="profile-name"></div>
          <div class="stream-info"></div>
        </a>
      </li>
      <li class="person-item" id="item10">
        <a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
          <img class="img-circle" src="">
          <div class="profile-name"></div>
          <div class="stream-info"></div>
        </a>
      </li>
      <li class="person-item" id="item11">
        <a href="#" class="btn btn-list center-element btn-box-shadow" role="button">
          <img class="img-circle" src="">
          <div class="profile-name"></div>
          <div class="stream-info"></div>
        </a>
      </li>
    </div>
  </ul>
  </div>
</div>

script.js

var people = ["freecodecamp", "storbeck", "terakilobyte", "habathcx", "robotcaleb", "medrybw", "thomasballinger", "noobs2ninjas", "beohoff", "owsla", "brunofin", "comster404"];
var online = [];
var offline = [];
var defaultImgUrl = "http://placehold.it/50x50";
var notFoundInfo = "Account Closed";
var showAllBtn, showOnlineBtn, showOfflineBtn, searchForm;

function getChannelInfo(channelUrl, streamObject) {
  $.getJSON(channelUrl)
    .done(function(data) {
      var imgUrl = data.logo;
      if (!imgUrl) {
        imgUrl = defaultImgUrl;
      }
      var name = data.display_name;
      var index = people.indexOf(name.toLowerCase());
      var url = data.url;
      var selector = '#item' + index;
      var listItem = $(selector);
      listItem.find('a').prop('href', url)
      listItem.find('img').prop('src', imgUrl);
      listItem.find('.profile-name').html(name);
      if (!streamObject) {
        listItem.find('a').append("<i class='fa fa-ban fa-align-right fa-2x'></i>");
        offline.push(selector);
      } else {
        listItem.find('a').append("<i class='fa fa-check-circle-o fa-2x'></i>");
        online.push(selector);
        listItem.find('.stream-info').html(data.status);
      }
    })
    .fail(onRequestFail);
}

function onRequestFail(jqXHR, textStatus, errorThrown) {
  console.log("There was an error with the request." + textStatus + errorThrown);
}

function onStreamCallback(data, textStatus, jqXHR) {
  if(typeof(data) === "undefined") {
    console.log("Caught undefined data here");
  } else {
    if(typeof(data.error) !== "undefined" && data.error !== "") {
      var message = data.message;
      var channelName = message.substring(message.indexOf("'") + 1, message.lastIndexOf("'"));
      var index = people.indexOf(channelName.toLowerCase());
      var selector = '#item' + index;
      var listItem = $(selector);
      listItem.find('a').prop('href', "undefined")
      listItem.find('img').prop('src', defaultImgUrl);
      listItem.find('.profile-name').html(channelName);
      listItem.find('a').append("<i class='fa fa-ban fa-align-right fa-2x'></i>");
      listItem.find('.stream-info').html(notFoundInfo);
      offline.push(selector);
    } else {
      getChannelInfo(data._links.channel + "?callback=?", data.stream);
    }
  }
}

function retrieveStream(channelName, successCallback) {
 $.getJSON('https://api.twitch.tv/kraken/streams/' + channelName + "?callback=?")
    .done(successCallback)
    .fail(onRequestFail);
}

function onShowAllClicked() {
  $('.person-item').show();
}

function onShowOnlineClicked() {
  offline.forEach(function(element) {
    $(element).hide();
  });
  online.forEach(function(element) {
    $(element).show();
  });
}

function onShowOfflineClicked() {
  online.forEach(function(element) {
    $(element).hide();
  });
  offline.forEach(function(element) {
    $(element).show();
  });
}

function onSearchInputChange(event) {
  if (typeof(event) === "undefined")
    return;
  var searchValue = (event.target.value).toLowerCase();
  if (searchValue === "") {
    onShowAllClicked();
  } else {
    $('.person-item').each(function(index) {
      var profileName = $(this).find('.profile-name').text().toLowerCase();
      var indexOfEvent = profileName.indexOf(event);
      if (profileName.indexOf(searchValue) < 0)
        $(this).hide();
      else
        $(this).show();
    });
  }
}

$(document).ready(function() {
  online = [];
  offline = [];
  // Retrieving info about list of usernames.
  people.forEach(function(element) {
    retrieveStream(element, onStreamCallback);
  });
  showAllBtn = $('#show-all');
  showAllBtn.click(onShowAllClicked);
  showOnlineBtn = $('#show-online');
  showOnlineBtn.click(onShowOnlineClicked);
  showOfflineBtn = $('#show-offline');
  showOfflineBtn.click(onShowOfflineClicked);
  searchForm = $('#searchForm');
  searchForm.on('input', onSearchInputChange);
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ttv-api.s3.amazonaws.com/twitch.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  background-color:#fdd5c0;
}

/* disables link styles */
a:link,
a:visited {
  text-decoration: none;
  color: #000000;
}

.list-items {
  background-color: #f46161;
  padding: 0px 0px 0px 0px;
}

.fixed-width {
  width: 500px;
}

.person-item {
  padding: 5px 0px 5px 0px;
}

.profile-name { 
  font-family: FontAwesome;
  position: absolute;
  color: #FFFFFF;
  top: 30%;
  left: 35%;
  right: 50%;
  text-align: left;
  text-shadow: 1px 1px #000000;
  font-size: 20px;
}

.stream-info {
  font-family: FontAwesome;
  position: absolute;
  color: #FFFFFF;
  left: 22%;
  bottom: 10%;
  text-align: left;
  text-shadow: 1px 1px #000000;
  font-size: 10px;
}

.profile-status {
  margin: 0 5%;
}

.img-circle {
  width: 70px;
  float: left;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.center-element {
  width: 100%;
  position: relative;
}

.btn {
  background-color: #FFFFFF;
}

.btn-header {
  background-color: #f46161;
  font-family: FontAwesome;
  color: white;
  text-shadow: 1px 1px #000000;
}

.btn-header:hover,
.btn-header:active {
  background-color: #ffcf62;
  color: white;
}

.btn-list {
  background-color: #f89d5b;
  margin: 0px 0px 10px 0px;
  border: none;
}

.btn-list:hover {
  background-color: #ffcf62;
}

.btn-box-shadow {
  -webkit-box-shadow: 2px 3px 0px rgba(4, 4, 4, 0.3);
  -moz-box-shadow: 2px 3px 0px rgba(4, 4, 4, 0.3);
  box-shadow: 2px 3px 0px rgba(4, 4, 4, 0.3);
}

.fa-ban {
  position: absolute;
  top: 30%;
  right: 5%;
  color: #fd1c15;
}

.fa-check-circle-o {
  position: absolute;
  top: 30%;
  right: 5%;
  color: #00b800;
}

#list-container {
  padding-top: 10px;
  padding-left: 30px;
  padding-right: 30px;
}

styles

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

Twitch TV helper.markdown

Twitch TV helper

A Pen by Alessandro Metta on CodePen.

License.