freecodecamp_twitchapp

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

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

Technologies

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

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

  
</head>

<body>

  <html ng-app="App">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/yeti/bootstrap.min.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css' rel='stylesheet' />

    <title>a twitch thingy</title>
  
</head>

<body>

    <div class="container">

        <home></home>

    </div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.js'></script>
    <script src='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js'></script>

 
</body>

</html>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/marekpetak/freecodecamp_twitchapp-aBaqEv */
.channel-logo {
    max-height: 30px;
}

/*Downloaded from https://www.codeseek.co/marekpetak/freecodecamp_twitchapp-aBaqEv */
(function() {
    'use strict';

    angular.module('App', ['App.Components', 'App.Services', 'angular-loading-bar']);

    angular.module('App.Components', []);
    angular.module('App.Services', []);
})();

(function() {
    'use strict';

    angular
        .module('App.Services')
        .factory('dataService', ['$http', '$sce', function($http, $sce) {
            var _factory = {};

            var API_STREAMS = "https://wind-bow.gomix.me/twitch-api/streams/";
            var API_USERS = "https://wind-bow.gomix.me/twitch-api/users/";

            function _getStreamStatus(streamName) {
                let url = API_STREAMS + streamName;
                return $http.jsonp($sce.trustAsResourceUrl(url));
            }

            function _getUserStatus(userName) {
                let url = API_USERS + userName;
                return $http.jsonp($sce.trustAsResourceUrl(url));
            }

            _factory.getStreamStatus = _getStreamStatus;
            _factory.getUserStatus = _getUserStatus;

            return _factory;
        }]);
})();

(function() {
    'use strict';
    angular
        .module('App.Components')
        .component('home', {
            template: '<br/><div> <ul class="list-group"> <li class="list-group-item" ng-repeat="item in $ctrl.channels"> <div class="panel" ng-class="{\'panel-success\': item.stream, \'panel-default\': !item.stream}"> <div class="panel-heading"> <img class="channel-logo" ng-src="{{item.stream.channel.logo}}"/> <strong> <a ng-href="https://www.twitch.tv/{{item.title}}">{{item.title}}</a> </strong> </div><div class="panel-body"> <span ng-if="item.stream">{{item.stream.game}}</span> <span ng-if="!item.stream"> <i>offline</i> </span> </div></div></li></ul></div>',
            controller: function HomeController(dataService) {
                var vm = this;
                var STREAMS = ["74grtjfy54vfhgt", "comster404", "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "test_channel"];

                vm.channels = [];

                function _getSTreamStatus() {
                    STREAMS.forEach(function(item) {

                        dataService.getUserStatus(item).then(function(data) {
                            if (data.data.status === 404) {
                                var listItem = {};
                                listItem.stream = null;
                                listItem.title = 'account closed';

                                vm.channels.push(listItem);
                            } else {
                                _requestChannelData(item);
                            }
                        }).catch(function(error) {
                            console.log(error);

                        });
                    });
                }

                function _requestChannelData(item) {
                    dataService.getStreamStatus(item).then(function(data) {

                        var listItem = {};

                        if (data.data.stream === null) {
                            listItem.stream = null;
                            listItem.title = 'offline';
                        } else {
                            listItem.stream = data.data.stream;
                            listItem.title = data.data.stream.game;
                        }

                        vm.channels.push(listItem);

                    }).catch(function(error) {
                        console.log(error);
                    });
                }

                vm.$onInit = function() {
                    _getSTreamStatus();
                };
            }
        });
})();

Comments