Create a gist now

Instantly share code, notes, and snippets.

@jessmc /index.html
Last active Jan 2, 2017

What would you like to do?
Twitch App
<div id="content">
<div id="header">
<ul>
<li>
<a href="https://www.twitch.tv/freecodecamp"><div id="fccStatus"></div></a>
</li>
<li>
<img src="https://c8.staticflickr.com/6/5456/31047970071_6d7d6ef75b_b.jpg" class="twitch-img"> </li>
<li><button class="online ">Online</button>
<button class="offline ">Offline</button>
<button class="all">All</button></li>
</ul>
</div>
<div id="online"></div>
<div id="offline"></div>
<div id="error"></div>
</div>
$(document).ready(function() {
var streamers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404", "dansgaming"];
for(var i=0; i < streamers.length; i++) {
var streamsURL = 'https://api.twitch.tv/kraken/streams/' + streamers[i] + '/?client_id=ldw9j1vrulwfjraqhso28926mkz4qos&callback=?';
var channelsURL = 'https://api.twitch.tv/kraken/channels/' + streamers[i] + '/?client_id=ldw9j1vrulwfjraqhso28926mkz4qos&callback=?';
var fccURL = "https://api.twitch.tv/kraken/streams/freecodecamp?client_id=ldw9j1vrulwfjraqhso28926mkz4qos&callback=?";
$.getJSON(fccURL, function(data3){
var link;
if(data3.stream===null) {
$("#fccStatus").html("Free Code Camp is Offline")
} else {
link = 'https://www.twitch.tv/freecodecamp';
$("#fccStatus").html("Free Code Camp is Online")
}
});
$.getJSON(streamsURL).done(function(data1) {
var name;
var logo;
var status;
var link;
if(data1.stream != null) {
name = data1.stream.channel.display_name;
logo = data1.stream.channel.logo;
status = data1.stream.channel.status;
link = data1.stream.channel.url;
$("#online").append("<a href=" + link + "><ul><li class='logo'>" + "<img src=" + logo + ">" + "</li>" + "<li class='name'>" + name + "</li>" + "<li class='status'>" + status + "</li></ul></a>");
} else if (data1.stream === null) {
$.getJSON(data1._links.channel + '/?client_id=ldw9j1vrulwfjraqhso28926mkz4qos&callback=?',function(data2){
var errorLogo;
var errorMessage;
if (data2.error) {
errorLogo= "https://c1.staticflickr.com/1/629/31121855544_7c2d25a3fd_t.jpg";
errorMessage = data2.message;
$("#error").append("<ul><li class='logo'>" + "<img src=" + errorLogo + ">" + "</li>" + "<li class='name'>" + errorMessage + "</li></ul>");
} else {
var logo = data2.logo;
var name = data2.display_name;
var link = data2.url;
$("#offline").append("<ul><li class='logo'>" + "<a href=" + link + "><img src=" + logo + ">" + "</a></li>" + "<li class='name'>" + name + "</li>" + "<li class='status'>Offline</li></ul>");
}
});
}
});
}
$('.online').on('click', () =>{
$('#offline').hide();
$('#error').hide();
$('#online').show();
});
$('.offline').on('click', () =>{
$('#online').hide();
$('#error').hide();
$('#offline').show();
});
$('.all').on('click', () =>{
$('#offline').show();
$('#error').show();
$('#online').show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
$twitch-color: #6441A4;
body {
background-color: $twitch-color;
}
img {
width: 60px;
}
#content {
display: flex;
flex-direction: column;
width: 70%;
margin: 70px auto;
@media (max-width: 769px) {
width: 100%;
}
#header {
ul {
display: flex;
justify-content: space-around;
background-color: #FFF;
margin-bottom: 0;
padding: 2em;
border-radius: 10px 10px 0 0;
border-bottom: 5px solid #000;
flex-direction: column;
@media (min-width: 769px) {
flex-direction: row;
}
@media (max-width:769px) {
li:nth-child(1) {
order: 3;
-webkit-order: 3;
}
li:nth-child(2) {
order: 2;
-webkit-order: 2;
}
li:nth-child(3) {
order: 4;
-webkit-order: 4;
}
}
li {
display: flex;
list-style-type: none;
align-items: center;
@media (max-width: 769px) {
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
#fccStatus {
font-family: arial;
@media (max-width: 769px) {
padding: 2em;
}
}
}
.twitch-img {
@media (min-width: 769px) {
width: 250px;
}
width: 50%;
order: -1;
}
button {
background-color: $twitch-color;
border: 0;
color: #FFF;
padding: 15px;
border-radius: 15px;
text-align: right;
margin: 10px;
font-size: 15px;
}
button:hover {
background-color: #3A02A0;
}
button:active {
transform: translateY(4px);
}
}
}
}
#online {
a {
text-decoration: none;
color: #000;
}
}
#offline,
#online,
#error {
ul {
padding-left: 0;
display: flex;
border-bottom: 5px solid #000;
margin: 0;
background-color: #FFF;
li {
list-style-type: none;
align-self: center;
}
.name {
font-family: arial;
text-transform: uppercase;
padding-left: 10px;
font-size: 20px;
@media (max-width: 769px) {
font-size: 12px;
}
}
.status {
margin-left: auto;
font-family: arial;
padding-right: 10px;
width: 40%;
@media (max-width: 769px) {
font-size: 12px;
}
}
.logo {
padding: 1em;
}
}
}
}

Twitch App

The user can see if a Twitch user is currently either streaming or offline, using Twitch’s JSON API. Also has a separate section to see if Free Code Camp is currently streaming or not.

A Pen by Jessica on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment