Twitch Streamers

Developer
DannyCoder
Size
4,997 Kb
Views
8,096
  1. Twitch Streamers Previews
  2. Twitch Streamers HTML Codes
  3. Twitch Streamers CSS Codes
  4. Twitch Streamers JS Codes

How do I make an twitch streamers?

Use Twitch.tv API to display user's online status. . What is a twitch streamers? How do you make a twitch streamers? This script and codes were developed by DannyCoder on 06 November 2022, Sunday.

Twitch Streamers Previews
IQ Test

Twitch Streamers - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Twitch Streamers</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://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 text-center"> <div class="panel panel-default"> <div class="panel-body"> <h1>Twitch Streamers</h1> <hr> <div class="board" id="twitch-channels"> <div class="board-inner"> <ul class="nav nav-tabs" id="myTab"> <span class="liner-right"></span> <span class="liner-left"></span> <li class="active"> <a href="#all" data-toggle="tab" title="all"> <span class="round-tabs one"> <i class="fa fa-users"></i> </span> </a> </li> <li > <a href="#online" data-toggle="tab" title="online"> <span class="round-tabs two"> <i class="fa fa-user"></i> </span> </a> </li> <li> <a href="#offline" data-toggle="tab" title="offline"> <span class="round-tabs three"><i class="fa fa-user-times"></i> </span> </a> </li> </ul> </div> <!-- /.board-inner --> <div class="row"> <div class="col-md-12"> <div class="input-group input-group-style"> <input type="text" class="form-control" placeholder="Search for streamers..."> <span class="input-group-addon"> <button type="submit"> <span class="glyphicon glyphicon-search"></span> </button> </span> </div> </div> </div> <!-- /.row --> <div class="tab-content"> <div class="tab-pane fade in active" id="all"> <div class="list-group text-left" id="all-list"> <a href="#" class="list-group-item clearfix"> <img src="img/freecodecamp300x300.png" class="img-circle" />Cras justo odio<span class='led-green'></span> </a> <a href="#" class="list-group-item"><img src="https://res.cloudinary.com/dannycoder/image/upload/v1450656132/freecodecamp300x300_w2k5qa.png" class="img-circle" />Cras justo odio<br><span class='led-red'></span></a> <a href="#" class="list-group-item"><img src="https://res.cloudinary.com/dannycoder/image/upload/v1450656132/freecodecamp300x300_w2k5qa.png" class="img-circle" />Cras justo odio<span class='led-red'></span></a>
</div> <!--/.list-group --> </div> <div class="tab-pane fade" id="online"> <div class="list-group text-left" id="online-list"> <a href="#" class="list-group-item"><img src="https://res.cloudinary.com/dannycoder/image/upload/v1450656132/freecodecamp300x300_w2k5qa.png" class="img-circle" />Cras justo odio<span class='led-red'></span></a> </div> <!--/.list-group --> </div> <div class="tab-pane fade" id="offline"> <div class="list-group text-left" id="offline-list"> <a href="#" class="list-group-item"><img src="https://res.cloudinary.com/dannycoder/image/upload/v1450656132/freecodecamp300x300_w2k5qa.png" class="img-circle" />FreeCodeCamp<span class='led-green'></span></a> </div> <!--/.list-group --> <div class="clearfix"></div> </div> <!-- /.tab-content --> </div> <!--/.board--> </div> <!-- /.panel-body --> </div> <!-- /.panel --> </div> <p>&copy; FreeCodeCamp | User: DannyCoder</p> </div><!-- /container --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Twitch Streamers - Script Codes CSS Codes

body { padding-top: 40px; padding-bottom: 40px; background: url('https://res.cloudinary.com/dannycoder/image/upload/v1450656128/robots_d1kgu6.png') fixed repeat right top;
}
.container { max-width: none !important; width: 360px;
}
h1 { font-family: 'Open Sans', sans-serif; font-size: 32px; font-weight: 100; color: rgba(255,255,255, .8); margin-top: 10px;
}
hr { border-color: rgba(255,255,255, .1);
}
.panel { -webkit-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3); -moz-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3); box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3); background-color: rgba(100,65,165, .2); border-color: rgba(255,255,255, 0.1);
}
/*--Tab bar adapted from Riliwan Ralogun @bootsnipp.com --*/
.board{ background: eeeeee;
}
.board .nav-tabs { position: relative; margin: -20px auto; margin-bottom: 0; box-sizing: border-box;
}
.liner-right{ height: 1px; /*background: #ddd;*/ background-color: rgba(255,255,255, 0.1); position: absolute; width:18%; margin: 0 auto; right: 24%; top: 50%; z-index: 1;
}
.liner-left{ height: 1px; background-color: rgba(255,255,255, 0.1); position: absolute; width: 18%; margin: 0 auto; left: 24%; top: 50%; z-index: 1;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #555555; cursor: default;
}
.board li { min-width: 33.333%; max-width: 33.333%; border-bottom: 4px solid rgba(255,255,255, 0.0);
}
.board li:hover { min-width: 33.333%; border-bottom: 4px solid rgba(255, 255, 255, 0.5);
}
.board li.active { min-width: 33.333%; /*prevent tab to chanage size on .active */ max-width: 33.333%; border-bottom: 4px solid rgba(100, 65, 165, 0.7);
}
span.round-tabs{ width: 46px; height: 46px; line-height: 46px; display: inline-block; border-radius: 100px; background-color: rgba(255,255,255, 0.7); z-index: 2; position: absolute; left: 0; text-align: center; font-size: 18px;
}
span.round-tabs.one{ color: #6441A5; border: 1px solid rgba(255, 255, 0.1); background-color: rgba(255,255,255, 0.1);
}
span.round-tabs.two{ color:rgba(135,187,83, 1); border: 1px solid rgba(255, 255, 0.1); background-color: rgba(255,255,255, 0.1);
}
span.round-tabs.three{ color: rgba(230,0,0, 0.8); border: 1px solid rgba(255, 255, 0.1); background-color: rgba(255,255,255, 0.1);
}
.nav-tabs > li.active > a span.round-tabs{ box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3); -webkit-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3); -moz-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3); background-color: rgba(255,255,255, 0.2);
}
.nav-tabs > li { width: 33.333%;
}
li:after { content: " "; position: absolute; left: 45%; opacity:0; margin: 0 auto; bottom: 0px; border: 5px solid transparent; border-bottom-color: rgba(255, 255, 255, 0.1); transition:0.1s ease-in-out;
}
.nav-tabs > li a{ width: 46px; height: 46px; margin: 20px auto; border-radius: 100%; padding: 0; border: 1px solid rgba(255,255,255, 0.1);
}
.nav-tabs > li a:hover{ background-clip: border-box;
}
.nav-tabs > li.active > a span.round-tabs { background-color: mediumpurple; background-color: rgba(255,255,255, 0.1) !important;
}
.nav-tabs { border-bottom: 1px solid rgba(255,255,255, 0.1);
}
.tab-pane{ position: relative; padding-top: 5px;
}
.tab-content { padding-bottom: 0;
}
/*----End Tab Bar ---*/
/*--Search box --*/
.input-group { margin-top: 15px;
}
.input-group { border-radius: 5px; margin-bottom: 10px;
}
.input-group-style .input-group-addon{ background: white !important; border-bottom-right-radius: 5px; border-top-right-radius: 5px; background-color: rgba(255,255,255, 0.7) !important; border-color: rgba(255,255,255, 0.1) !important;
}
.input-group-style .form-control{	border-right:0;	box-shadow:0 0 0;	border-color:#ccc;
}
.input-group-style button{ border:0; background:transparent;
}
.form-control { border-radius: 5px;
}
input { font-family: 'Open Sans', sans-serif; font-size: 14px !important; background-color: rgba(255,255,255, 0.1) !important; border-color: rgba(255,255,255, 0.1) !important; box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3); -webkit-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3); -moz-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3); color: rgba(255,255,255, 0.7) !important;
}
/*--Twitch streamers list */
.img-circle { width: 20%; margin-right: 10px;
}
.list-group-item { font-family: 'Open Sans', sans-serif; font-size: 16px; position: relative; vertical-align: middle; background-color: rgba(255,255,255, 0.1); border-color: rgba(255,255,255, 0.1); border-bottom: none; color: rgba(255,255,255, 0.4) !important;
}
a.list-group-item:hover { vertical-align: middle; background-color: rgba(255,255,255, 0.2); box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3); -webkit-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3); -moz-box-shadow: -1px 3px 8px 0px rgba(0,0,0,0.3);
}
.float-right { float: right; margin-top: 18px;
}
/*--Panel body --*/
.panel-body { margin-bottom: -6px; padding-bottom: 0px;
}
/*--LED Light (Streamer ON(GREEN)/OFF(RED)--*/
span.led-red { display: block; width: 12px; height: 12px; background-color: rgb(230,0,0); box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5), 0px 0px 3px 2px rgba(226,0,0,0.5); border-radius: 100%; clear: both; position: absolute; top: 42%; right: 6%;
}
span.led-green { display: block; width: 12px; height: 12px; background-color: rgb(135,187,83); box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5), 0px 0px 3px 2px rgba(135,187,83,0.5); border-radius: 100%; clear: both; position: absolute; top: 42%; right: 6%;
}

Twitch Streamers - Script Codes JS Codes

$(window).load(function () { var usernames = ["freecodecamp", "storbeck", "medrybw", "terakilobyte", "RobotCaleb", "noobs2ninjas", "habathcx"], $htmlAll = $("#all-list"), $htmlOnline = $("#online-list"), $htmlOffline = $("#offline-list"); //Reset the list items on load $htmlAll.html(""); $htmlOnline.html(""); $htmlOffline.html(""); //Search Box Filter List $(".form-control").on('keyup', function(){ console.log("keyup pressed"); var searchKeyword = $(this).val().toLowerCase(); $(".list-group-item").each(function(){ if ($(this).filter('[data-search-keyword *= ' + searchKeyword + ']').length > 0 || searchKeyword.length < 1) { $(this).show(); } else { $(this).hide(); } }); console.log(searchKeyword); }); //TODO: CHANGE THIS TO A SINGLE AJAX CALL $.each(usernames, function(index, username) { $.getJSON('https://api.twitch.tv/kraken/users/' + username + '?callback=?', function(json) { if(json.status === 404) { // username does not exist console.log("Username: " + username + " does not exist."); } else { var userInfo = []; userInfo[0] = "https://www.twitch.tv/" + username; userInfo[1] = json.display_name; userInfo[2] = json.logo? json.logo : "https://res.cloudinary.com/dannycoder/image/upload/v1450656122/img-placeholder_kuedre.jpg"; userInfo[3] = json._links.self; userInfo[4] = json.display_name.toLowerCase(); $.getJSON('https://api.twitch.tv/kraken/streams/' + username + '?callback=?', function(data) { if(data.stream != null) { // user is online $htmlAll.append('<a href="' + userInfo[0] + '" class="list-group-item" target="_blank" data-search-keyword="' + userInfo[4] + '"><img src="' + userInfo[2] + '" class="img-circle" />' + userInfo[1] + '<span class="led-green"></span></a>'); $htmlOnline.append('<a href="' + userInfo[0] + '" class="list-group-item" target="_blank" data-search-keyword="' + userInfo[4] + '"><img src="' + userInfo[2] + '" class="img-circle" />' + userInfo[1] + '<span class="led-green"></span></a>'); } else { //User if Offline $htmlAll.append('<a href="' + userInfo[0] + '" class="list-group-item" target="_blank" data-search-keyword="' + userInfo[4] + '"><img src="' + userInfo[2] + '" class="img-circle" />' + userInfo[1] + '<span class="led-red"></span></a>'); $htmlOffline.append('<a href="' + userInfo[0] + '" class="list-group-item" target="_blank" data-search-keyword="' + userInfo[4] + '"><img src="' + userInfo[2] + '" class="img-circle" />' + userInfo[1] + '<span class="led-red"></span></a>'); } }) } }) })
});
Twitch Streamers - Script Codes
Twitch Streamers - Script Codes
Home Page Home
Developer DannyCoder
Username DannyCoder
Uploaded November 06, 2022
Rating 3
Size 4,997 Kb
Views 8,096
Do you need developer help for Twitch Streamers?

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!

DannyCoder (DannyCoder) Script Codes
Name
CamperNews
Calculator
Personal Portfolio Webpage
Palindromes
A Pen by DannyCoder
Zipline Random Quote Machine
Pomodoro Clock
Local Weather
Create amazing art & images 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!