Use the Twitchtv JSON API [freeCodeCamp [Intermediate Projects]] (Challenge)

index.html

<div class="twitch-container" ng-app="twitchApp" ng-controller="twitchCtrl">
  <div class="twitch-badge">
      <div class="title text-center">
         <a href="#" ng-click="resetFilter()" class="label label-default pull-right">any status</a>
         <a href="#" ng-click="onlineFilter()" class="label label-success pull-right">online</a>
        <a href="#" ng-click="offlineFilter()" class="label label-danger pull-right">offline</a>
        <h2>Twitch Streamers</h2>
      </div>
    
      <ul class="list-group">
          <li ng-if="filter === undefined || filter === channel.stream.isLive" ng-class="{online: channel.stream.isLive === true}" class="list-group-item" ng-repeat="channel in channels">
            <a ng-href="{{channel.url}}" target="_blank">
          <div class="row">
            <div class="col-xs-2">
          <img class="img-rounded channel-logo	" src="{{channel.logo}}" />
            </div>
            
              <div class="text-wrapper text-left col-xs-10">
                  <small class="label label-success pull-right" ng-if="channel.stream.isLive">online</small>
                  <small class="label label-danger pull-right" ng-if="channel.stream.isLive !== true">offline</small>
                <h3 class="text-left">{{channel.title}}</h3>
               
                <label ng-class="{'label-danger': channel.closed , description: !channel.closed}" class="label">{{channel.status}}</label>
                <span class="label label-primary">{{channel.stream.game}}</span>
              </div>
            </div>
            </a>
          </li>
      </ul>
  </div>
  
  <div class="copy"><a href="http://www.linuxenko.pro">&copy; Svetlana Linuxenko</a></div>
</div>

script.js

var app = angular.module('twitchApp', []);

app.factory('twitchAPI', function($http) {
  var channels = ["freecodecamp", "dcodecampfeer", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"];
  var twitchURI = 'https://api.twitch.tv/kraken/';
  
  return function() {
    return channels.map(function(channel) {
      return {
        api : $http.get(twitchURI + 'channels/' + channel),
        stream : $http.get(twitchURI + 'streams/' + channel),
        channel : channel
      };
    });
  }
});

app.controller('twitchCtrl', function($scope, twitchAPI) {
  $scope.channels = [];
  $scope.filter = undefined;
  
  $scope.onlineFilter = function() {
    $scope.filter = true;
  }
  
  $scope.offlineFilter = function() {
    $scope.filter = false;
  }
  
  $scope.resetFilter = function() {
    $scope.filter = undefined;
  }
  
   twitchAPI().forEach(function(twitch) { 
     twitch.api.success(function(data){
       var channel = {
           stream : {},
           title : data.display_name,
           status : data.status,
           logo : data.logo || new GIXI(100).getImage(),
           url : data.url
        };
       
       twitch.stream.success(function(data) {
         if (!data.stream) {
           channel.stream.isLive = false;
         } else {
           channel.stream.isLive = true
           channel.stream.game = data.stream.game;
         }
       });
       
       $scope.channels.push(channel);
     });
     
     twitch.api.catch(function(data) {
         $scope.channels.push({
           title : twitch.channel,
           status : 'Account Closed',
           logo : new GIXI(100).getImage(),
           closed : true,
           url : "#"
         });
     });
     
   });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://npmcdn.com/gixi@0.0.6/dist/gixi-min.js"></script>

style.css

body,html,.twitch-container {
  width: 100%;
  height: 100%;
  font-family: 'Ubuntu', sans-serif;
}


.twitch-container h2 {
  text-transform: uppercase;
  font-weight: bold;
  color: #444;
  text-shadow: 1px 1px 3px #828282;
}

.twitch-badge {
  max-width: 500px;
  margin: 10px auto;
}

.twitch-badge .description {
  padding-left: 0px;
  color: #444;
  font-size: 14px;
  font-weight: normal;
  white-space: normal;
}

.twitch-container .copy {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px 0px;
}

.list-group-item a {
  color: #333;
}

.list-group-item h3 {
  margin: 5px 0px;
}

.list-group-item {
  border-top: 1px solid #ffd0f0;
  min-height: 90px;
  margin-top: 5px;
}

.list-group-item.online {
  border-top: 1px solid #aafaac;
}

.channel-logo {
  height: 50px;
  margin: 10px 0px 0px 0px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,700,500" rel="stylesheet" />

Use the Twitchtv JSON API [freeCodeCamp [Intermediate Projects]] (Challenge) .markdown

Use the Twitchtv JSON API [freeCodeCamp [Intermediate Projects]] (Challenge)

A Pen by Svetlana Linuxenko on CodePen.

License.