Skip to content

Instantly share code, notes, and snippets.

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

Embed
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
You can’t perform that action at this time.