<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Twitch.tv API</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<body>
<div class="container">
<div class="spacer"></div><!-- spacer -->
<div class="block text-center">
<h1 id="top">Twitch TV</h1><br>
<a href="https://www.twitch.tv/freecodecamp" target="_blank"><h3>FreeCodeCamp<span id="fcc"</span></h3></a>
</div><!-- block -->
<div class="spacer"</div>
<div class="block">
<div class="row">
<div class="col-md-4" id="user">
User: <br>
</div><!-- col-md-4 -->
<div class="col-md-4" id="status">
Status: <br>
</div><!-- col-md-4 -->
<div class="col-md-4" id="game">
Game: <br>
</div><!-- col-md-4 -->
</div><!-- row -->
</div><!-- block -->
<div class="spacer"></div>
<footer id="bottom-footer" class="text-center">
<p id="FooterText">An App By <a href="https://www.freecodecamp.com/charlesmarlow" target="_blank"> Charles Marlow</a></p>
</footer>
</div><!-- container -->
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/--Gordon--/twitchtv-api-OjoqKG */
body {
background-image: url("http://letzgro.net/wp-content/uploads/2016/08/Image3.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#top {
text-align: center;
font-size: 60px;
margin: 0px 0px;
}
.block {
background-color: black;
opacity: 0.75;
color: white;
padding: 50px;
width: 50%;
margin-right: auto;
margin-left: auto;
border-radius: 40px;
font-size: 1.5em;
padding-bottom: 3%;
}
.spacer {
padding: 5%;
}
footer {
background-color: black;
opacity: 0.75;
color: white;
padding: 20px 0px 0px 10px;
width: 35%;
margin-right: auto;
margin-left: auto;
border-radius: 15px;
font-size: 20px;
padding-bottom: 2%;
}
a {
color: white;
}
/*Downloaded from https://www.codeseek.co/--Gordon--/twitchtv-api-OjoqKG */
/* This programme fetches stream info from the
/ Twitch.tv API and links it for user's purpose.
/ It's comprised of several getJSON requests, used
/ for different pieces of data */
$(document).ready(function(){
// array of users who freecodecamp channel follows
var streams = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck",
"habathcx", "RobotCaleb", "noobs2ninjas"];
var url = "https://wind-bow.gomix.me/twitch-api/streams/" + streams + "?callback=?";
// request to fetch data for the freecodecamp channel
$.getJSON(url).done(function(data){
if (data.stream === null){
$("#fcc").html(" Is currently offline");
}
else {
$("#fcc").html(" Is currently online");
}
});
// iterate through streams and fetch data
for (var i = 0; i < streams.length; i++){
$.ajax({
type: "GET",
url: "https://wind-bow.gomix.me/twitch-api/channels/" + streams[i] + "?callback=?",
async: false,
dataType: "json",
success: function(dataI){
$.getJSON("https://wind-bow.gomix.me/twitch-api/streams/" + dataI.name + "?callback=?").done(function(data2){
var name = data2._links.self.slice(37);
// if user is N/A
if (data2.stream === null){
$("#user").append('<a target="blank" href="https://wind-bow.gomix.me/twitch-api/' + name + '">' + name + '</a><br>');
$("#status").append("Offline :( <br>");
$("#game").append("N/A<br>");
}
else {
$("#user").append('<a target="blank" href="https://wind-bow.gomix.me/twitch-api/' + name + '">' + name + '</a><br>');
$("#status").append("Online :) <br>");
$("#game").append(data2.stream.game + "<br>");
}
});
},
error: function(errorMessage){
$("#user").append('User Unavailable<br>');
$("#status").append("Not Found <br>");
$("#game").append("N/A<br>");
}
})
};
})
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Twitter Bootstrap
jQuery
v3.2.1
