<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>A Pen by felix</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<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>
<h1>Twitch Streamers</h1>
<div class="col-md-offset-3 col-md-6 workfield">
<div class="row">
<div class="col-xs-2">
<img id="ESL_SC2" class="icons" src="#">
</div>
<div class="col-xs-4 text">
<p id="ESL_SC2name"></p>
</div>
<div class="col-xs-6 text">
<a target="_blank" id="ESL_SC2link"><p id="ESL_SC2stream"></p></a>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<img id="OgamingSC2" class="icons" src="#">
</div>
<div class="col-xs-4 text">
<p id="OgamingSC2name"></p>
</div>
<div class="col-xs-6 text">
<a target="_blank" id="OgamingSC2link"><p id="OgamingSC2stream"></p></a>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<img id="cretetion" class="icons" src="#">
</div>
<div class="col-xs-4 text">
<p id="cretetionname"></p>
</div>
<div class="col-xs-6 text">
<a target="_blank" id="cretetionlink"><p id="cretetionstream"></p></a>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<img id="freecodecamp" class="icons" src="#">
</div>
<div class="col-xs-4 text">
<p id="freecodecampname"></p>
</div>
<div class="col-xs-6 text">
<a target="_blank" id="freecodecamplink"><p id="freecodecampstream"></p></a>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<img id="habathcx" class="icons" src="#">
</div>
<div class="col-xs-4 text">
<p id="habathcxname"></p>
</div>
<div class="col-xs-6 text">
<a target="_blank" id="habathcxlink"><p id="habathcxstream"></p></a>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<img id="RobotCaleb" class="icons" src="#">
</div>
<div class="col-xs-4 text">
<p id="RobotCalebname"></p>
</div>
<div class="col-xs-6 text">
<a target="_blank" id="RobotCaleblink"><p id="RobotCalebstream"></p></a>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<img id="noobs2ninjas" class="icons" src="#">
</div>
<div class="col-xs-4 text">
<p id="noobs2ninjasname"></p>
</div>
<div class="col-xs-6 text">
<a target="_blank" id="noobs2ninjaslink"><p id="noobs2ninjasstream"></p></a>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<img id="StreamerHouse" class="icons" src="#">
</div>
<div class="col-xs-4 text">
<p id="StreamerHousename"></p>
</div>
<div class="col-xs-6 text">
<a target="_blank" id="StreamerHouselink"><p id="StreamerHousestream"></p></a>
</div>
</div>
</div>
<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/f1e2l3i4x5/a-pen-by-felix-yoddje */
h1 {
text-align: center;
margin-bottom: 30px;
}
.workfield {
background-color: grey;
color: white;
padding: 30px;
}
.icons {
max-width: 50px;
height: 50px;
margin: 10px;
vertical-align: middle;
}
.text {
margin-top: 25px;
word-break: break-all;
}
a {
color: yellow;
}
/*Downloaded from https://www.codeseek.co/f1e2l3i4x5/a-pen-by-felix-yoddje */
var url = "https://wind-bow.gomix.me/twitch-api";
var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "habathcx", "RobotCaleb", "noobs2ninjas", "StreamerHouse"];
var usersLength = users.length;
for (var i=0; i<usersLength; i++) {
(function(i) {
$.getJSON(url+"/users/"+users[i]+"?callback=?", function(data) {
$('#'+users[i]).attr('src', data.logo);
$('#'+users[i]+'name').html(data.display_name);
$('#'+users[i]+'link').attr('href', "https://www.twitch.tv/" + data.name);
$.getJSON(url+"/streams/"+users[i]+"?callback=?", function(dataStream) {
if (dataStream.stream!==null) {
$('#'+users[i]+'stream').text(dataStream.stream.game);
}
else {
$('#'+users[i]+'stream').text('offline');
}
});
});
})(i);
}