Item: Twitch.tv API
Rating: 3.4
Author: --Gordon--

5 Downloads
400 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!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>");
			}
		})
	};
	
})