Twitch Status

Developer
Steven
Size
4,190 Kb
Views
30,360
  1. Twitch Status Previews
  2. Twitch Status HTML Codes
  3. Twitch Status CSS Codes
  4. Twitch Status JS Codes

How do I make an twitch status?

What is a twitch status? How do you make a twitch status? This script and codes were developed by Steven on 31 July 2022, Sunday.

Twitch Status Previews
IQ Test

Twitch Status - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Twitch Status</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <ul class="list-inline mynav"> <li id="tabAll" class="tab selected"><a href="#menu1">All</a></li> <li id="tabOn" class="tab"><a href="#menu2">Online</a></li> <li id="tabOff" class="tab"><a href="#menu3">Offline</a></li> </ul> <div class="searchbar"><p class="fa fa-search searchspan"><input id="searchbox"></p></div> <div class="friend-container"> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Twitch Status - Script Codes CSS Codes

body { background: rgba(6, 183, 213, .2);
}
.container { border: 1px solid rgba(6, 183, 213, .6); margin-top: 10px; padding:0px; width: 310px; /* Wheres the 9 coming from ffs */ background: white;
}
.mynav { border:none; background:rgba(6, 183, 213, 1); margin:0px; margin-bottom:15px; padding:0px;
}
.mynav li { position:relative; background: rgba(6, 183, 213, 1); width: 100px; text-align:center; cursor: pointer; padding:15px; padding-left:0px; padding-right:0px;
}
.mynav li:first-child, .mynav li:nth-child(2) { border-right: solid rgba(255, 255, 255, .3) 1px;
}
.mynav li a,.mynav li a:hover { font-size:larger; color: white;; text-decoration: none;
}
.mynav li:hover { background: rgba(255, 255, 255, .07);
}
.searchbar { position: relative; width:90%; border: 1px solid rgba(0, 0, 0, .2); border-radius: 50px; background:white; margin:auto; padding-left: 3%; margin-bottom: 17px
}
.searchbar:after { top:130%; left:-6%; border: solid; content: ""; height: 10px; width: 112%; position: absolute; pointer-events: none; border-color: rgba(0, 0, 0, 0); border-bottom-color: rgba(0, 0, 0, .2); border-width: 1px;
}
.searchspan { color: rgba(0, 0, 0, .2); background:white; border-radius:50px; padding:5px; padding-left:0px; padding-right:0px; margin:0px;
}
.searchbar input { color: black; border: none; font-Size:larger; margin: auto; padding-left:5px; width:240px;
}
.searchbar input:focus { outline-width: 0;
}
.searchbar:hover { box-shadow: 0px 0px 10px 1px rgba(6, 183, 213, .2);
}
.friend-container { padding:10px;
}
.friend { position:relative; padding-top: 10px; cursor: pointer; overflow:auto;
}
.friend:hover { background: rgba(0, 0, 0, 0.03);
}
.friend ul { margin-top: -7px;
}
.friend img { height:50px; width:50px; float:left; margin-left:5px; margin-right:10px; margin-bottom:10px; border-radius:50%;
}
.friend li { list-style-type: none;
}
.name { font-size: 20px;
}
.extra { width: 86%; font-size: 10px; color: rgba(0, 0, 0, 0.5);
}
.online:after { position: absolute; content:"\2714"; font-size: 30px; left: 88%; top: 20%; color: green;
}
.offline:after { position: absolute; content:"!"; font-size: 30px; font-weight: bold; left: 90%; top: 20%; color: red;
}
.closed:after { position: absolute; content:"X"; font-size: 30px; font-weight: bold; left: 88%; top: 20%; color: red;
}
.closed { background: rgba(255, 0, 0, .1);
}
.selected:after { top:100%; left:50%; border: solid; content: ""; height: 0px; width: 0px; position: absolute; pointer-events: none; border-color: rgba(6, 183, 213, 0); border-top-color: rgba(6, 183, 213, 1); border-width: 10px; margin-left: -10px;
}
.debug { margin-top: 50px;
}

Twitch Status - Script Codes JS Codes

$(".tab").on("click", function() { $(".tab").removeClass("selected"); $(this).addClass("selected"); userFilter = $(this).prop("id"); // Choose filter curusers = users; //Get full list to start curusers = curusers.filter(function(f, i) { //Filter based on online status switch(userFilter) { case "tabAll": return true; case "tabOn": return curusers[i].online; case "tabOff": return !curusers[i].online; } }); doSearch();//Run current search on it
});
var userFilter = "tabAll";
var users = [];
var curusers = [];
var fccusers = ["freecodecamp", "milleniumtvlol", "terakilobyte", "habathcx", "dotastarladder_en", "RobotCaleb", "comster404", "medryBW","gripex90"];
var wedone = 0;
for (var i = 0; i < fccusers.length; i++) { $.getJSON('https://api.twitch.tv/kraken/users/' + fccusers[i] + '?client_id=6dnj5if11ftvpvhzo79nbw5k5kh0nhf&callback=?') .done(function(data) { var user = {}; user.display_name = data.display_name; user.name = data.name; user.logo = (data.logo != null) ? data.logo : "http://placehold.it/63x63"; user.url = "http://www.twitch.tv/" + data.name; user.updateStatus = updateStatus; users.push(user); wedone++; if (wedone == fccusers.length) loadingDone(); }) .error(function(data) { console.log(data) wedone++; });
}
function loadingDone() { wedone = 0; curusers = users; for (var i = 0; i < users.length; i++) users[i].updateStatus(users[i], keeptrack);
}
function keeptrack() { wedone++; if (wedone == users.length) { updateDisplay(users); }
}
function updateStatus(obj, callback) { $.getJSON('https://api.twitch.tv/kraken/streams/' + obj.name + '?client_id=6dnj5if11ftvpvhzo79nbw5k5kh0nhf&callback=?') .done(function(data) { if (!data._links) { obj.closed=true; } obj.online = (data.stream) ? true : false; if (data.stream) if (data.stream.channel) obj.gamedesc = data.stream.channel.status; callback(); }) .error(function(data) { console.log(data) });
}
//Remember. Doesn't care. Just displays current result list
//result = subset to display. or all
function updateDisplay(result) { var outstring = ""; $(".friend-container").empty(); result.forEach(function(currentValue, index) { outstring = buildString(currentValue); $(outstring).appendTo(".friend-container"); }); //Stick some click handlers on $('.friend').on("click", function() { window.open($(this).attr("href"), "_blank"); }); //Overly complex looking click attach to also handle middle mouse $(".friend").on('mousedown', function(e) { if( (e.which == 2) ) { // Middle Mouse e.preventDefault(); window.open($(this).attr("href")); } });
}
function buildString(currentValue) { var xline = (currentValue.online) ? "online" : (currentValue.closed) ? "closed" : "offline"; var tagLine = (currentValue.online) ? currentValue.gamedesc : (currentValue.closed) ? "Account Closed" : "Offline"; outstring = ""; outstring += "<div href='" +currentValue.url+ "'class='friend " +xline+ "''>"; outstring += "<p>"; outstring += "<img src='" + currentValue.logo + "'>"; outstring += "<ul>"; outstring += "<li class='name'>" + currentValue.display_name + "</li>"; outstring += "<li class='extra'>" +tagLine+ "</li>"; outstring += "</ul></p></div>"; return outstring;
}
function findInName(arr, search) { result = []; result = arr.filter(function(f, i) { if (arr[i].name.indexOf(search.toLowerCase().trim()) != -1) return true; return false; }); return result;
}
//ertioadflxcbnm = wait for 2nd letter.
//qwyupsghjkzv = go now.
//Dunno why. but thats what it did on fcc
$("#searchbox").on("keyup", doSearch);
function doSearch() { var result = []; var goLetters = "qwyupsghjkzv"; var searchstring = $("#searchbox").val(); searchstring = searchstring.toLowerCase(); if ((searchstring.length > 1) || goLetters.indexOf(searchstring) != -1) { result = findInName(curusers, searchstring); } else { result = curusers; } updateDisplay(result);
}
Twitch Status - Script Codes
Twitch Status - Script Codes
Home Page Home
Developer Steven
Username volv
Uploaded July 31, 2022
Rating 3
Size 4,190 Kb
Views 30,360
Do you need developer help for Twitch Status?

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!

Steven (volv) Script Codes
Name
Squares Within Range
Closure Examples
Nested Loops
WK 15 Exercises
Reddit Spoiler Markdown
Camper News
Midas Gift Rolls - Updating
JSRange
Midas Points
Heavy Snake
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!