Skip to content

Instantly share code, notes, and snippets.

@aleksandar-b

aleksandar-b/index.html

Created August 29, 2015 15:53
Show Gist options
  • Save aleksandar-b/4fe62449c1fc440dc677 to your computer and use it in GitHub Desktop.
Save aleksandar-b/4fe62449c1fc440dc677 to your computer and use it in GitHub Desktop.
Download ZIP
qOWwdm
Raw
index.html
<body class="backg">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-4"></div>
<div class="col-xs-4 border">
<div class="col-xs-4 border l h"> Users</div>
<div class="col-xs-4 border h m">Online</div>
<div class="col-xs-4 border h r">Offline</div>
<div class="col-xs-12"> <div class="input-group gr">
<input type="text" class="form-control inputText" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default go" type="button">Go!</button>
</span>
</div><!-- /input-group --></div>
</div>
</div>
<div class="col-xs-12">
<div class="col-xs-4"></div>
<div class="col-xs-4 border content"></div>
<div class="col-xs-4"></div>
</div>
</div>
</body>
Raw
script.js
$(document).ready(function () {
var flag = 0;
var offline1 = [];
var url = 'http://www.twitch.tv/';
var stream;
var users = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff", "medrybw", "brunofin", "comster404", "monstercat", "lpmitkev_nonstop"];
var filter = [];
/////////////////
var streamers_online = [];
var streamers_offline = [];
users.forEach(function(streamer) {
$.get("https://api.twitch.tv/kraken/streams/" + streamer + "?callback=?", function(ad) {
if (ad.hasOwnProperty('stream') && ad['stream'] === null) {
streamers_offline.push(streamer);
} else if (ad.hasOwnProperty('stream')) {
streamers_online.push(streamer);
}
}, "JSONP")
});
/// Why this don't work?
////////////
function getOffline(par) {
flag = 2;
$('.content').html('');
par.forEach(function(user,index) {
$.get('https://api.twitch.tv/kraken/streams/'+user +'', function (data) {
$.get('https://api.twitch.tv/kraken/users/'+user +'', function (da) {
if(!da.logo ){
da.logo = 'https://static-cdn.jtvnw.net/jtv_user_pictures/twitch-profile_image-94a42b3a13c31c02-300x300.jpeg'
}
if(data.hasOwnProperty('stream') && data.stream === null){
stream ='<div class="off">Offline</div>';
$('.content').append('<div class= "col-xl-12 bck" ><img class="img1 img-circle" src="'+da.logo+'" /><a href="'+url + user +'">'+user + '</a> '+ '<div>' + stream + '</div></div>');
}
}, 'JSONP');
}, 'JSONP');
});
}
$('.l').on('click', function() {
$('.inputText').val("");
fireAjax(users);
});
$('.m').on('click', function() {
$('.inputText').val("");
getLive(streamers_online);
});
$('.r').on('click', function() {
$('.inputText').val("");
getOffline(streamers_offline);
});
function getLive(par) {
flag = 1;
$('.content').html('');
par.forEach(function(user,index) {
$.get('https://api.twitch.tv/kraken/streams/'+user +'', function (data) {
$.get('https://api.twitch.tv/kraken/users/'+user +'', function (da) {
if(!da.logo ){
da.logo = 'https://static-cdn.jtvnw.net/jtv_user_pictures/twitch-profile_image-94a42b3a13c31c02-300x300.jpeg'
}
if(data.hasOwnProperty('stream') && data.stream !== null){
stream = '<div class="on">Online </div>'+ '<div class="stream"> Streaming: '+data.stream.game+ '</div>';
$('.content').append('<div class= "col-xl-12 bck" ><img class="img1 img-circle" src="'+da.logo +'" /><a href="'+url + user +'">'+user + '</a> '+ '<div>' + stream + '</div></div>');
}
}, 'JSONP');
}, 'JSONP');
});
}
$(document).on('click', '.bck', function() {
var t = $(this).find('a').attr('href');
window.open(t);
});
$(document).on('click', 'a', function() {
var t = $(this).attr('href');
window.open(t);
});
function fireAjax(par, flag) {
flag = flag | 0;
$('.content').html('');
par.forEach(function(user,index) {
$.get('https://api.twitch.tv/kraken/streams/'+user +'', function (data) {
$.get('https://api.twitch.tv/kraken/users/'+user +'', function (da) {
if(!da.logo ){
da.logo = 'https://static-cdn.jtvnw.net/jtv_user_pictures/twitch-profile_image-94a42b3a13c31c02-300x300.jpeg'
}
if(data.hasOwnProperty('stream') && data.stream === null){
stream ='<div class="off">Offline</div>';
}else if ( data.hasOwnProperty('stream') && data.stream != null){
stream = '<div class="on">Online </div>'+ '<div class="stream"> Streaming: '+data.stream.game+ '</div>';
}else{
stream = '<div class="deleted">Deleted Account</div>';
}
$('.content').append('<div class= "col-xl-12 bck" ><img class="img1 img-circle" src="'+da.logo +'" ><a href="'+url + user +'">'+user + '</a> '+ '<div>' + stream + '</div></div>');
}, 'JSONP');
}, 'JSONP');
});
}
fireAjax(users);
var arr = [];
function search() {
var value = $('.inputText').val();
$('.content').find('.bck').each(function() {
if(this.getElementsByTagName('a')[0].innerText.toLowerCase().indexOf(value) >= 0 ){
arr.push(this.outerHTML);
}
});
$('.content').html(" ");
arr.forEach(function(val){
$('.content').append(val);
});
arr = [];
}
$('.inputText').on('keyup', function(event){
event.preventDefault();
filter = [];
$('.content').html(" ");
var val = $('.inputText').val();
if(flag == 0){
flag = 0;
$('.content').html(" ");
filter = [];
users.forEach(function (userg) {
if(userg.indexOf(val) != -1){
filter.push(userg);
}
});
}
else if(flag == 1 ){
flag = 1;
$('.content').html(" ");
filter = [];
streamers_online.forEach(function (user) {
if(user.indexOf(val) != -1){
filter.push(user);
}
});
}else if(flag == 2){
flag = 2;
$('.content').html(" ");
filter= [];
streamers_offline.forEach(function (user2) {
if(user2.indexOf(val) != -1){
filter.push(user2);
}
});
}
fireAjax(filter, flag);
flag = [];
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
.border{
padding: 5px;
color:white;
border:1px solid rgba(0,0,0,.2);
border:1px solid #2f8e81;
margin-top:1px;
border-radius:4px;
}
a{
color: #6ecf91;
}
.content{
cursor:pointer;
}
.backg{
background-size:cover;
background-image: url('http://www.bothsidesofthetable.com/wp-content/uploads/2013/09/blurred_background.jpg');
}
.h{
background: rgba(0,0,0, 0.6);
}
.gr{
margin:5px;
}
.inputText{
background:transparent;
}
.go{
background:transparent;
}
.go:hover{
background:transparent;
}
.h:hover{
background: rgba(0,0,0, 0.8);
}
.bck{
height:60px;
border-radius: 7px;
margin:3px;
background: rgba(0, 0, 0, 0.5);
-webkit-transition: width 0.2s, background 0.2s; /* Safari */
transition: width 0.2s background 0.2s;
}
.bck:hover{
background: rgba(0, 0, 0, 0.8);
}
.off{
float:right;
color: #9f3935;
}
.on{
color: #255e1f;
float:right;
}
.deleted{
float:right;
color: #17091b;
}
.stream{
color: #255e1f;
}
.l{
cursor: pointer;
color: #79bbd2;
}
.m{
cursor: pointer;
color:#255e1f;
}
.r{
cursor: pointer;
color: #9f3935;
}
.img1{
float:left;
width:30px;
margin:5px;
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment