LVQxWv

index.html

<div class='container-fluid'> 
  <div class="btn-group">
    <button class="btn btn-lg active">All</button>
    <button class="btn btn-lg">Active</button>
    <button class="btn btn-lg">Inactive</button>
  </div>
  
  <div class='results'>
  </div>
</div>

LVQxWv.markdown

LVQxWv

A Pen by Engineered Edge on CodePen.

License.

script.js

var streams = ["freecodecamp", "storbeck", "terakilobyte",
  "habathcx", "RobotCaleb", "comster404", "brunofin",
  "thomasballinger", "noobs2ninjas", "beohoff", "medrybw"
];

function makeURL(stream) {
  return "https://api.twitch.tv/kraken/streams/" + stream + '?callback=?';
}

function Streamer(streamName) {
  var self = this;
  this.streamName = streamName;
  this.streamInfo = '';
  this.parseFirst = function(data) {
    var nextURL = data._links.channel + '?callback=?';
    if (!data.stream) {
      self.status = 'Not Active';
    } else {
      self.status = data.stream.channel.status;
    }
    $.getJSON(nextURL).done(self.parseSecond);
  };
  this.parseSecond = function(x) {
    self.displayName = x.display_name;
    self.logoURL = x.logo;
    self.streamURL = x.url;
      if (!self.logoURL) {
    self.logoURL = 'http://a3.mzstatic.com/us/r30/Purple1/v4/2b/dd/2c/2bdd2cc4-ff7d-fd8b-83e2-2c7b811ba914/icon175x175.png'
  }
    self.createRow();
  };
  this.createRow = function() {
    var $a = $('<a></a>')
      .attr('href', this.streamURL)
      .appendTo($('.results')),
      $row = $('<div></div>')
      .addClass('row')
      .appendTo($a),
      $logo = $('<div></div')
      .addClass('logo')
      .addClass('col-md-4')
      .appendTo($row),
      $img = $('<img>')
      .attr('src', this.logoURL)
      .attr('width', '170')
      .addClass('img-thumbnail')
      .appendTo($logo),
      $info = $('<div></div>')
      .addClass('col-md-8')
      .addClass('info')
      .appendTo($row),
      $name = $('<div></div>')
      .text(this.displayName)
      .appendTo($info),
      $status = $('<div></div>')
      .text(this.status)
      .appendTo($info);

    if (self.status === 'Not Active') {
      $a.addClass('down');
    } else {
      $a.addClass('up');
    }

  };
}

$(document).ready(function() {
  function getStream(stream) {
    var url = makeURL(stream);
    var streamObj = new Streamer(stream);
    $.getJSON(url).done(streamObj.parseFirst);
    return streamObj;
  }

  streams = streams.map(getStream);
  $('.btn').on('click', function() {
    $('.btn').removeClass('active');
    $(this).addClass('active');

    switch ($(this).text()) {
      case 'Active':
        $('.up').show();
        $('.down').hide();
        break;
      case 'Inactive':
        $('.up').hide();
        $('.down').show();
        break;
      default:
        $('.up').show();
        $('.down').show();
    }
  });
});

scripts

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

style.css

.active {
  background-color: blue
}

styles

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