Twitch Streames App

In this example below you will see how to do a Twitch Streames App with some HTML / CSS and Javascript

Uses Twitch api

Thumbnail
This awesome code was written by gagan86nagpal, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gagan86nagpal ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Twitch Streames App</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
	<head>
		<title> Twitch App </title>
	</head>
	<body>
		<div class="Container">
			<div class="jumbotron">
			<h1 class='text-center'>Twitch Streamers </h1>
			</div>
		</div>
		<div class="container-fluid">
			<div col-xs-8>
				<ul id="ListParent">
				</ul>
			</div>
		</div>
	</body>
	
			
</html>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/gagan86nagpal/twitch-streames-app-EyyEQw */
.jumbotron
{
	background-color:#7D97F0;
}
#ListParent li
{
	list-style-type:none;
	background-color:#DDDDED;
	padding:20px;
	font-size:25px;
}
#ListParent
{
	text-align:center;
	margin-left:100px;
	margin-right:100px;
}
a{
	color:#090475;
}
body
{
	background-color:#807F85;
}

/*Downloaded from https://www.codeseek.co/gagan86nagpal/twitch-streames-app-EyyEQw */
var channelArray=["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas","comster404 ","brunofin"];

$(document).ready(function()
								 {
	var i;
	var channelName='';
		for(i=0;i<channelArray.length;i++)
			{
				channelName=channelArray[i]; url='https://api.twitch.tv/kraken/streams/'+channelName + '?callback=?';
				getData(url,channelName);
			}
});
function getData(url,channelName)
{
	$.getJSON(url,function(data)
					 {
		
		if(data.stream===null) //offline
			{
				
				$('#ListParent').append('<li> <a target="_blank" href="https://www.twitch.tv/'+ channelName+ '" </a>'+channelName +  ' : Offline'+  '</li>');
			}
		else if(data.status==422) // Unavailable
			{
Unavailable			}
		else // online
			{
				$('#ListParent').append('<li> <a target="_blank" href="https://www.twitch.tv/'+ channelName+ '" </a>'+channelName +  ' : '+data.stream.game+  '</li>');
			}
	});
}

Comments