Zipline: Use the Twitchtv JSON API

index.html

<main ng-app="TwitchApp">
  <h1 class="text-center">#FreeCodeCamp - Zipline: Use the Twitchtv JSON API</h1>
  <section ng-controller="TwitchAppCtrl">
    <div class="container">  
      <div class="row">
        <div class="col-md-12">
          <tabset>
            <tab heading="All">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">@</span>
                <input ng-model="searchText" type="text" class="form-control" aria-describedby="basic-addon1">
              </div>              
              <ul id="people"><a href="http://twitch.tv/{{user.username}}" target="_blank" ng-repeat="user in allUsers | filter:searchText">
                <li><img ng-src="{{user.logo}}" err-src="http://placehold.it/50x50" class="pic"/><span class="name">{{user.name}}</span><span class="status"><i class="{{user.status}}"></i></span></li></a></ul>              
            </tab>
            <tab heading="Online">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">@</span>
                <input ng-model="searchText" type="text" class="form-control" aria-describedby="basic-addon1">
              </div>              
              <ul id="people"><a href="http://twitch.tv/{{user.username}}" target="_blank" ng-repeat="user in onlineUsers | filter:searchText">
                <li><img ng-src="{{user.logo}}" err-src="http://placehold.it/50x50" class="pic"/><span class="name">{{user.name}}</span><span class="status"><i class="{{user.status}}"></i></span></li></a></ul>              
            </tab>
            <tab heading="Offline">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">@</span>
                <input ng-model="searchText" type="text" class="form-control" aria-describedby="basic-addon1">
              </div>              
              <ul id="people"><a href="http://twitch.tv/{{user.username}}" target="_blank" ng-repeat="user in offlineUsers | filter:searchText">
                <li><img ng-src="{{user.logo}}" err-src="http://placehold.it/50x50" class="pic"/><span class="name">{{user.name}}</span><span class="status"><i class="{{user.status}}"></i></span></li></a></ul>              
            </tab>        
          </tabset>
        </div>
      </div>
    </div>
  </section>
</main>

script.js

angular.module('TwitchApp', ['ngAnimate', 'ui.bootstrap']);
angular.module('TwitchApp').controller('TwitchAppCtrl', function ($scope, $window) {

    $scope.allUsers = [];
    $scope.onlineUsers = [];
    $scope.offlineUsers = [];
    var streamers = [
        'freecodecamp',
        'GeoffStorbeck',
        'terakilobyte',
        'habathcx',
        'notmichaelmcdonald',
        'RobotCaleb',
        'medrybw',
        'comster404',
        'brunofin',
        'thomasballinger',
        'joe_at_underflow',
        'noobs2ninjas',
        'mdwasp',
        'beohoff',
        'xenocomagain'
    ];
    var cb = '?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?';
    var url = 'https://api.twitch.tv/kraken/';
    streamers.forEach(function (stream) {
        var obj = {};
        $.getJSON(url + 'streams/' + stream + cb).success(function (data) {
            var streaming = data.stream === null ? false : true;
            if (streaming) {
                obj.status = 'green fa fa-check';
                var streamTitle = data.stream.channel.status;
                if (streamTitle.length > 36) {
                    streamTitle = streamTitle.substring(0, 33);
                    streamTitle += '...';
                }
                obj.streamTitle = streamTitle;
            } else {
                obj.status = 'red fa fa-exclamation';
                data.streamTitle = '';
            }
            obj.username = stream;
            $.getJSON(url + 'users/' + stream + cb).success(function (data) {
                obj.name = data.display_name;
                obj.logo = data.logo;
                $scope.allUsers.push(obj);
                if (streaming) {
                    $scope.onlineUsers.push(obj);
                } else {
                    $scope.offlineUsers.push(obj);
                }
                $scope.profile = $scope.allUsers;
                $scope.$apply();
            });
        });
    });  

});

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>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>

style.css

main #people {
  padding-left: 0;
}
main #people li .pic {
  height: 50px;
  width: 50px;
  border-radius: 50%;
}

main #people li {
  background-color: rgba(33,233,233, 0.1);
  list-style-type: none;
  display: block;
  padding-left: 20px;
  position: relative;
  font-family: Roboto, Arial, Sans-Serif;
  padding-top: 5px;
  padding-bottom: 5px;
}
main #people li:nth-child(even) {
  background-color: #f7f6f6;
}
main #people li .pic {
  height: 50px;
  width: 50px;
  border-radius: 50%;
}
main #people li .name, main #people li .status {
  position: absolute;
  line-height: 50px;
}
main #people li .name {
  left: 80px;
  color: #F47564;
}
main #people li .status {
  right: 20px;
}
main #people li .title {
  color: #b5a9ac;
  font-size: .7em;
}

.green {
  color: #8FD7D6;
}

.red {
  color: #F47564;
}

.input-group{
  padding: 15px;
}

styles

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

Zipline: Use the Twitchtv JSON API.markdown

Zipline: Use the Twitchtv JSON API

A Pen by Paulo Leonardo Vieira Rodrigues on CodePen.

License.