Twitch Status 2.0
How do I make an twitch status 2.0?
This application uses Twitchtv API. It shows if a streamer is offline or online, and if he is online it will show additional details about their stream. . What is a twitch status 2.0? How do you make a twitch status 2.0? This script and codes were developed by Mihkel on 08 December 2022, Thursday.
Twitch Status 2.0 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Twitch Status 2.0</title> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row"> <div class="col-sm-8 col-sm-offset-2 main-container"> <div class="row"> <div class="col-sm-12 menu"> <div class="btn-group btn-group-justified" role="group"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default all-btn active-btn" data-action="all" disabled>All</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-action="online" disabled>Online</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-action="offline" disabled>Offline</button> </div> </div> </div> </div> <div class="row"> <div class="col-sm-12 search-container"> <div class="inner-addon left-addon"> <i class="glyphicon glyphicon-search"></i> <input type="text" class="form-control search" placeholder="Search.." disabled /> </div> </div> </div> <div class="row"> <div class="col-sm-12 streamer-container"> <div class="list-group streamer-list"> <p class="text-center loading">Loading..</p> </div> </div> </div> <script id="streamer-template" type="text/x-handlebars-template"> <a href="{{href}}" class="list-group-item {{status}}" target="_blank"> <div class="media"> <div class="media-left"> <img class="media-object" src="{{img}}" width="64" height="64" alt="{{name}}"> </div> <div class="media-body"> <h4 class="media-heading">{{name}}</h4> <p class="stream-title">{{title}}</p> <div class="row"> <div class="col-md-10"> <p class="game">{{game}}</p> </div> {{#if viewers}} <div class="col-md-2"> <p class="text-muted float-md-right"><i class="glyphicon glyphicon-user"></i> {{viewers}}</p> </div> {{/if}} </div> </div> </div> </a> </script> </div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Twitch Status 2.0 - Script Codes CSS Codes
body { background-color: #413394;
}
.main-container { background-color: #eee; margin-top: 1em;
}
.menu,
.search-container,
.streamer-container { padding: 0;
}
.menu .btn { font-weight: 100; text-transform: uppercase;
}
.menu .btn:not(.active-btn) { color: #4b307b;
}
.menu .btn:not(.active-btn):focus { color: #fafafa;
}
.menu .btn:focus,
.active-btn,
.active-btn:hover,
.active-btn:disabled:hover { background-color: #4b307b; color: #fafafa; outline-color: #4b307b; border-color: #4b307b;
}
.btn,
.search-container input,
.list-group a.list-group-item { border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;
}
.form-control:focus { border-color: #ccc; box-shadow: none;
}
.glyphicon-search { opacity: 0.5;
}
.inner-addon { position: relative;
}
/* style icon */
.inner-addon .glyphicon { position: absolute; padding: 10px; pointer-events: none;
}
/* align icon */
.left-addon .glyphicon { left: 0px;
}
.right-addon .glyphicon { right: 0px;
}
/* add padding */
.left-addon input { padding-left: 30px;
}
.right-addon input { padding-right: 30px;
}
.loading { margin-top: 0.8em;
}
.list-group { margin-bottom: 0;
}
.list-group-item { border-right: 0.5em solid #ccc;
}
.list-group-item.online { border-right: 0.5em solid green;
}
.media-heading { font-weight: 700;
}
.streamer-list .list-group-item.offline .stream-title { color: #bb0000;
}
.streamer-list .list-group-item.online .stream-title { color: green; font-weight: 500;
}
.game { color: #777;
}
@media (min-width: 992px) { .float-md-right { float: right; }
}
Twitch Status 2.0 - Script Codes JS Codes
var http = { get: function(url) { return $.ajax({ url: url, method: 'get', headers: { 'Client-ID': 'joqnh7qgvstt4yt5xz8xlxkwmvcb71l' } }); }
};
var Streamer = function(name, href, img, status, title, game, viewers) { this.name = name; this.href = href; this.img = img || 'https://www.upload.ee/image/6021094/defaultlogo.png'; this.status = status; this.title = title; this.game = game ? 'Playing ' + game : ''; this.viewers = viewers;
};
var app = { init: function() { this.names = [ 'freecodecamp', 'nl_Kripp', 'alkaizerx', 'dansgaming', 'guardsmanbob', 'paschabiceps', 'TSM_Dyrus', 'brunofin', 'medrybw', 'storbeck', 'comster404' ]; this.streamers = []; this.streamersState = []; this.baseUri = 'https://api.twitch.tv/kraken/streams/'; var source = $('#streamer-template').html(); this.template = Handlebars.compile(source); this.cacheDom(); this.fetchAll(); }, cacheDom: function() { this.$container = $('.streamer-list'); this.$menuButtons = $('.menu .btn'); this.$search = $('.search'); }, addEventListeners: function() { this.$menuButtons.on('click', this.filter.bind(this)); this.$search.on('keyup', this.search.bind(this)); }, render: function(streamers) { var html = streamers.reduce(function(html, streamer) { html += this.template(streamer); return html; }.bind(this), ''); this.$container.html(html); }, fetchAll: function() { var html = ''; function fetch(x) { if (x == this.names.length) { this.render(this.streamers); this.streamersState = this.streamers.slice(); this.addEventListeners(); this.$menuButtons.attr('disabled', false); this.$search.attr('disabled', false); return; } http.get(this.baseUri + this.names[x]) .then(function(data) { if (data.stream) { var name = data.stream.channel.display_name; var href = data.stream.channel.url; var img = data.stream.channel.logo; var status = 'online'; var title = data.stream.channel.status; var game = data.stream.game; var viewers = data.stream.viewers; var streamer = new Streamer(name, href, img, status, title, game, viewers); this.streamers.push(streamer); fetch.call(this, ++x); } else { http.get(data._links.channel) .then(function(data) { var name = data.display_name; var href = data.url; var img = data.logo; var status = 'offline'; var title = 'Offline'; var streamer = new Streamer(name, href, img, status, title); this.streamers.push(streamer); fetch.call(this, ++x); }.bind(this)) .fail(function(xhr) { var name = this.names[x]; var href = 'https://www.twitch.tv/' + this.names[x]; var img = ''; var status = 'closed'; var title = JSON.parse(xhr.responseText).message; var streamer = new Streamer(name, href, img, status, title); this.streamers.push(streamer); fetch.call(this, ++x); }.bind(this)); } }.bind(this)); } fetch.call(this, 0); }, filter: function(e) { var action = e.target.dataset.action; this.$search.val(''); this.$menuButtons.removeClass('active-btn'); e.target.classList.add('active-btn'); var streamers = this.streamers.slice(); switch (action) { case 'online': streamers = streamers.filter(function(streamer) { return streamer.status === 'online'; }); break; case 'offline': streamers = streamers.filter(function(streamer) { return streamer.status === 'offline'; }); break; } this.streamersState = streamers; this.render(streamers); }, search: function(e) { var query = e.target.value.toLowerCase(); var streamers = this.streamersState.filter(function(streamer) { return streamer.name.toLowerCase().indexOf(query) > -1; }); this.render(streamers); }
};
$(document).ready(function() { app.init();
});
Developer | Mihkel |
Username | Krokodill |
Uploaded | December 08, 2022 |
Rating | 3 |
Size | 4,245 Kb |
Views | 8,096 |
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!
Name | Size |
Camper Leaderboard | 4,964 Kb |
Simon Game | 4,975 Kb |
React Weather Broadcast | 6,708 Kb |
React Pokedex | 13,070 Kb |
Pomodoro Timer | 3,599 Kb |
Slide out navigation | 2,674 Kb |
Game of Life | 2,922 Kb |
React Recipe Box | 5,347 Kb |
Form validation with jQuery | 2,641 Kb |
Local Weather | 3,340 Kb |
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!
Name | Username | Size |
CSS Social Media Icon | TychoBlender | 3,871 Kb |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
Medium Menu | Lucasmotta | 3,923 Kb |
Starfield old school style | Bolloxim | 5,214 Kb |
Custom checkbox example | Capelo | 3,495 Kb |
HEXAGON | Aurumlux | 1,684 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
My three.js practice | Esambino | 3,203 Kb |
Minimal Menu | Achudars | 3,430 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!