Twitchtv_Json

In this example below you will see how to do a Twitchtv_Json with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 19920612, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 19920612 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Twitchtv_Json</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
    <main ng-app="twitchApp" ng-controller="myController">
        <div id="all-content">
            <div id="header">
                <ul id="user-menu">
                    <li id="user-all">All</li>
                    <li id="user-online">Online</li>
                    <li id="user-offline">Offline</li>
                </ul>
            </div>
            <div id="content-details">
                <div id="search-bar">
                    <input type="text" ng-model="searchTxt" />
                </div>
                <div id="search-result">
                    <ul>
                        <li ng-repeat="result in results | filter:searchTxt"">
                            <a ng-href="{{result.twitchURL}}">
                                <img id="user-logo" ng-src="{{result.imgSrc}}"></img>
                                <span id="user-title">{{result.name}}</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </main>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/19920612/twitchtv_json-NRZjMw */
body{
    background-color: #f79f94;
    min-width: 360px;
    margin: 0px;
}
#all-content{
    width: 360px;
    margin: auto;
}
#user-menu{
    background-color: #F47564;
    text-align: center;
    list-style: none;
    padding: 0px;
    margin: 0px;
    color: white;
}
#user-menu li{
    display: inline-block;
    padding: 20px 0px;
    width: 31%;
    cursor: pointer;
}
#user-menu li.open{
    background-color: white;
    color: #F47564;
}
#user-menu li:nth-child(2){
    border-left: 1px solid #f79f94;
    border-right: 1px solid #f79f94;
}
#content-details{
    background-color: white;
}
#search-bar{
    border-bottom: 1px solid #E4E0E1;
    padding: 20px;
    text-align: center;
}
#search-bar input{
    width: 80%;
    border-radius: 20px;
    border: 1px solid #E4E0E1;
    padding-left: 20px;
    outline: none;
}
#search-result ul{
    list-style-type: none;
}
#search-result li{
    position: relative;
    padding: 10px 0px;
    height: 60px;
}
#search-result li a{
    text-decoration: none;
}
#user-logo{
    width: 60px;
    border-radius: 50%;
}
#user-title{
    display: inline-block;
    position: relative;
    top: -40%;
    line-height: 60px;
    color: #F47564;
}

/*Downloaded from https://www.codeseek.co/19920612/twitchtv_json-NRZjMw */
var app = angular.module('twitchApp', []);
app.controller('myController', function($scope, $http){
    var api = "https://api.twitch.tv/kraken";
    var cb = '?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=JSON_CALLBACK';
    var streamers = ["freecodecamp", "GeoffStorbeck", "terakilobyte", "habathcx","notmichaelmcdonald","RobotCaleb","medrybw","comster404","brunofin","thomasballinger","joe_at_underflow","noobs2ninjas","mdwasp","beohoff","xenocomagain"];

    $scope.allUserArr = [];
    $scope.onlineUserArr = [];
    $scope.offlineUserArr = [];
    streamers.forEach(function(user){
        $http.jsonp(api + '/channels/' + user + cb)
        .success(function(userData){
            console.log(userData)
            if(userData.status != 404){
                $scope.allUserArr.push({'name': userData.display_name, 'imgSrc': (userData.logo ? userData.logo : 'http://placehold.it/50x50'), 'twitchURL': userData.url});
                
                $http.jsonp(api + '/streams/' + user + cb)
                .success(function(streamData){
                    if(streamData.stream){
                        $scope.onlineUserArr.push({'name': userData.display_name, 'imgSrc': (userData.logo ? userData.logo : 'http://placehold.it/50x50'), 'twitchURL': userData.url});
                    }else{
                        $scope.offlineUserArr.push({'name': userData.display_name, 'imgSrc': (userData.logo ? userData.logo : 'http://placehold.it/50x50'), 'twitchURL': userData.url});
                    }
                });                
            }
        })
    });

    function updateUserList(selectedType){
        $('#user-all').removeClass('open');
        $('#user-online').removeClass('open');
        $('#user-offline').removeClass('open');    
        
        $(selectedType).addClass('open');    
    }
    $('#user-all').click(function(){
        updateUserList('#user-all');
   
        $scope.results = $scope.allUserArr;
        $scope.$apply();
    });
    $('#user-online').click(function(){
        updateUserList('#user-online');
        
        $scope.results = $scope.onlineUserArr;
        $scope.$apply();
    });
    $('#user-offline').click(function(){
        updateUserList('#user-offline');
        
        $scope.results = $scope.offlineUserArr;
        $scope.$apply();
    });
    
    angular.element(document).ready(function(){
        $('#user-all').click();
    });
});

Comments