Skip to content

Instantly share code, notes, and snippets.

@Ace-ezer

Ace-ezer/index.html

Created March 30, 2018 05:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Ace-ezer/e7a7cf95fa8aef09b340e22c70dd52e7 to your computer and use it in GitHub Desktop.
Save Ace-ezer/e7a7cf95fa8aef09b340e22c70dd52e7 to your computer and use it in GitHub Desktop.
Download ZIP
twitchtv
Raw
index.html
<body background="http://www.originalsoundversion.com/wp-content/uploads/2016/10/Twitch-Logo.jpg">
<div id="main" class="text-center">
<h1>Twitch Tv live streamings</h1>
<div class="row" id="lists">
<span>
<div class="col-md-4 dropdown text-center"><button class="btn dropdown-toggle" data-toggle="dropdown">ALL </button><ul id="l1" class="dropdown-menu">
</ul></div>
<div class="col-md-4 dropdown text-center"><button class="btn dropdown-toggle" data-toggle="dropdown">ONLINE</button><ul id="l2" class="dropdown-menu">
</ul></div>
<div class="col-md-4 dropdown text-center"><button class="btn dropdown-toggle" data-toggle="dropdown">OFFLINE</span></button><ul id="l3" class="dropdown-menu">
</ul></div>
</span>
</div>
</div>
</body>
Raw
script.js
//i'm unable to output the names of the offline channels by arr[] or switch.it is just showing offline
$(document).ready(function(){
var arr=["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
$("#l1").html('');
for(var i=0;i<8;i++)
{$.ajax({
type:'GET',
url:'https://wind-bow.glitch.me/twitch-api/streams/'+arr[i],
/*headers:{
'Client-Id':'';
},*/
success: function(data){
if(data.stream!=null) {$('#l1,#l2').append('<li><img src='+data.stream.channel["profile_banner"]+' class="media-object" style="width:100px"><h3><a href="'+data.stream.channel["url"]+'" target="_blank">'+data.stream.channel["name"]+'</a></h3><p>'+data.stream["game"]+':'+data.stream.channel['status']+'</p></li><li class="divider"></li>');}
else if(data.stream==null){ $("#l1,#l3").append('<li><h2>'+arr[i]+'</h2><p>offline</p></li><li class="divider"></li>');}
},
error: function(err)
{
alert('error');
}
}); }
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Raw
style.css
h1{
font-family:lobster;
font-size:70px;
font-weight: bold;
font-variant: caps;
color:white;
}
h3{
font-family: Monospace;
font-weight: bold;
font-size: 30px;
font-variant:small-caps;
}
#lists{
margin-top:50px
}
#l1,#l2,#l3{
list-style-type: none;
margin:10px;
width:100%;
padding:0;
}
li
{
background-color:Tomato;
padding:2px;
margin:10px;
color: black;
}
li a {
color:white;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment