Twitch Live Channels

Developer
Katie Inkblotty
Size
4,956 Kb
Views
44,528
  1. Twitch Live Channels Previews
  2. Twitch Live Channels HTML Codes
  3. Twitch Live Channels CSS Codes
  4. Twitch Live Channels JS Codes

How do I make an twitch live channels?

Built with Angular.js, SCSS, and the Twitch.tv API. What is a twitch live channels? How do you make a twitch live channels? This script and codes were developed by Katie Inkblotty on 08 August 2022, Monday.

Twitch Live Channels Previews
IQ Test

Twitch Live Channels - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Twitch Live Channels</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body ng-app="twitchApp"> <div ng-controller="followedCtrl as follows"> <div class="top-bar"> <h1> <a href="http://www.twitch.tv/" target="_blank"> <!--<i class="fa fa-twitch"></i>--> <img class='twitch-logo' src="http://s.jtvnw.net/jtv_user_pictures/hosted_images/Twitch_Logo_White.png" /> </a> </h1> <nav> <ul> <li ng-click="follows.moveArrow('5');follows.removeFilters();">All</li> <li ng-click="follows.moveArrow('35');follows.addFilter('online');">Live</li> <li ng-click="follows.moveArrow('72');follows.addFilter('offline');">Offline</li> </ul> <div id="select-arrow"></div> </nav> </div> <div class="channels-container"> <i ng-hide="follows.channels" class="fa fa-spinner fa-spin"></i> <div class="channel {{channel.status}}" ng-repeat="channel in follows.channels | orderBy: 'channel.name' | filter: follows.filters" id="{{channel.channel.name}}" ng-show="channel"> <a href="{{ channel.channel.url }}" target="_blank"> <h2> <img class="pic" ng-src="{{ channel.channel.logo }}" alt="logo"> {{ channel.channel['display_name'] }} </h2> <h3 class="thin status"><i class="fa fa-circle"></i>{{channel.status}}</h3> <h3><span class="thin">Streaming</span> {{ channel.channel.game }}</h3> <p>{{ channel.channel.status }}</p> </a> </div> </div> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Twitch Live Channels - Script Codes CSS Codes

body { font-family: 'Open Sans', sans-serif; margin: 0;
}
a { color: #6441a5; text-decoration: none;
}
.thin { font-weight: 300;
}
.top-bar { align-items: center; background-color: #6441a5; color: #fff; display: flex; flex-wrap: no-wrap; justify-content: space-between; margin: 0;
}
.top-bar h1 { font-weight: 300; letter-spacing: 0.09em; margin-left: 2%; width: 40%;
}
.top-bar h1 a { color: white;
}
.top-bar .twitch-logo { margin: 0; width: 3em;
}
.top-bar i { margin-right: 1%;
}
.top-bar nav { font-size: 1.5em; font-weight: 300; margin: 0;
}
.top-bar nav #select-arrow { height: 0; width: 0; margin-left: 35%; transition: 0.5s ease all; border-left: 1em solid transparent; border-right: 1em solid transparent; border-bottom: 0.7em solid white;
}
.top-bar nav ul { list-style: none; margin: 0; padding: 0;
}
.top-bar nav ul li { border-radius: 0.25em; cursor: pointer; display: inline-block; height: 100%; letter-spacing: 0.1em; margin: 0; margin-top: 0.6em; padding: 0.5em 1.1em 0.5em 1.1em; text-align: center; transition: all 0.5s ease;
}
.top-bar nav ul li:hover { background-color: #4b307b;
}
.channels-container { display: flex; align-items: flex-start; align-content: center; flex-wrap: wrap; justify-content: center;
}
.channels-container .fa-spinner { color: #6441a5; font-size: 3em; margin: 2% auto;
}
.channels-container .channel { border: 1px solid #737373; border-radius: 2%; min-height: 15em; margin: 1em; opacity: 0.6; padding: 0.5% 1%; text-align: center; transition: opacity 0.5s ease; width: 28%;
}
.channels-container .channel .status { margin-top: 0;
}
.channels-container .channel i { color: #737373; font-size: 0.8em; margin-right: 0.7em;
}
.channels-container .channel.online { opacity: 1;
}
.channels-container .channel.online i { color: green;
}
.channels-container .channel.online:hover { background-color: #6441a5; transition: 0.5s ease all;
}
.channels-container .channel.online:hover a { color: #fff;
}
.channels-container .channel:hover { box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.5); opacity: 1;
}
.channels-container .channel h2 { line-height: 3em;
}
.channels-container .channel img { border-radius: 50%; vertical-align: middle; width: 3em;
}
@media screen and (max-width: 500px) { .top-bar { font-size: 0.6em; } .top-bar nav #select-arrow { border-bottom: 0.9em solid white; } .top-bar nav ul li { padding: 0.5em 0.65em 0.5em 0.65em; } .channels-container .channel { width: 90%; }
}

Twitch Live Channels - Script Codes JS Codes

var app = angular.module('twitchApp', []);
app.factory('twitchServ', ['$http', function($http) { // checks all followed channels return $http.get('https://api.twitch.tv/kraken/users/inkblotty/follows/channels?limit=100') .success(function(data) { return data; }) .error(function(err) { return err; });
}]);
app.controller('followedCtrl', ["$scope", "$http", "twitchServ", function($scope, $http, twitchServ){ var follows = this; follows.channels = []; // an array of stream objects follows.channelArr = []; // just an array of names follows.filters = {status:'online'}; follows.addFilter = function(filt){ follows.filters['status'] = filt; } follows.removeFilters = function(){ follows.filters = {}; } follows.moveArrow = function(newLeftMargin){ var arrow = document.getElementById('select-arrow'); arrow.style['margin-left'] = newLeftMargin + '%'; } follows.findStreamByName = function(name){ for (index in follows.channels){ if (follows.channels[index].channel.name === name) { return follows.channels[index]; } } } follows.onlineLookup = function(channels){ // checks specified channels to see which are actively streaming var url = "https://api.twitch.tv/kraken/streams?" + "channel=" + channels; return $http.get(url) .success(function(data){ follows.online = data.streams; }) .error(function(err){ console.log(err); }); }; twitchServ.success(function(data){ for (channel in data.follows){ // make new object so that we can add "status" parameter follows.channels.push(data.follows[channel]); follows.channels[channel].status = "offline"; } }) .then(function(){ for (channel in follows.channels){ // make array of names to push to online lookup follows.channelArr.push(follows.channels[channel].channel.name); } follows.onlineLookup(follows.channelArr) .then(function(){ // update the corresponding channel object to status:'online' if (follows.online.length > 0){ for (index in follows.online){ var chanName = follows.online[index].channel.name; var channelObj = follows.findStreamByName(chanName); channelObj.status = "online"; } } }); }); }]);
Twitch Live Channels - Script Codes
Twitch Live Channels - Script Codes
Home Page Home
Developer Katie Inkblotty
Username inkblotty
Uploaded August 08, 2022
Rating 3
Size 4,956 Kb
Views 44,528
Do you need developer help for Twitch Live Channels?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Katie Inkblotty (inkblotty) Script Codes
Name
Pomodoro Timer
GeoLocation
Random Quote Generator
Star Wars search
FCC Camper Leaderboard
Weather App
Camper News Clone
React To Do Task App
Cycling D3 Scatterplot
Google Calendar Event Feed
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!