Skip to content

Instantly share code, notes, and snippets.

@Javabob61

Javabob61/index.html

Last active March 5, 2018 05:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Javabob61/5678ce541532d5b36c4a4df549d00002 to your computer and use it in GitHub Desktop.
Save Javabob61/5678ce541532d5b36c4a4df549d00002 to your computer and use it in GitHub Desktop.
Download ZIP
TwitchTV App
Raw
index.html
<head>
<link href='https://fonts.googleapis.com/css?family=Allerta' rel='stylesheet'>
</head>
<div class="container">
<div id="header" class="text-center">
<h1>Use the TwitchTV JSON API</h1>
<h2>Free Code Camp</h2>
<a href="https://www.twitch.tv/freecodecamp" target="_blank">
<h3 id="fccStatus"></h3>
</a>
</div>
<h1>
<div class="row">
<div class="col-md-4">Logo:</div>
<div class="col-md-4">Display Name:</div>
<div class="col-md-4">Status:</div>
</div>
</h1>
<div id="followerInfo">
</div>
</div>
Raw
script.js
$(document).ready(function() {
var following = [];
var status; // global variable for displaying offline status or now playing information.
var logo; // stores URL for the logo image.
var name; // display_name variable is saved here while looping.
var liveStatus; // boolean for currently broadcasting status.
var url =
"https://wind-bow.gomix.me/twitch-api/streams/freecodecamp?callback=?";
$.getJSON(url, function(fccStreamData) {
// Find out if freecodecamp channel is online ( IOWs not null ).
if (fccStreamData.stream === null) {
$("#fccStatus").html("is currently OFFLINE!");
} else {
$("#fccStatus").html("is currently ONLINE!");
}
});
var followerUrl =
"https://wind-bow.glitch.me/twitch-api/users/freecodecamp/follows/channels?callback=?";
$.getJSON(followerUrl, function(fccFollowsData) {
// Pulls names of following from freecodecamp "follows" JSON
for (var i = 0; i < fccFollowsData.follows.length; i++) {
var displayName = fccFollowsData.follows[i].channel.display_name;
following.push(displayName);
}
//following.push("comster404"); // adds some fake accounts for testing errors.
//following.push("brunofin");
//following.push("ESL_SC2");
following.push("food");
for (i = 0; i < following.length; i++) {
// Pulls JSON data for logo, name, and status for accounts that FCC follows.
var nowPlayingURL =
"https://wind-bow.gomix.me/twitch-api/channels/" + // channel contents info.
following[i] +
"?callback=?";
var liveURL =
"https://wind-bow.gomix.me/twitch-api/streams/" + // channel streaming status.
following[i] +
"?callback=?";
$.getJSON(liveURL, function(isLiveData) {
// Find out if channel is online ( IOWs not null ).
if (isLiveData.stream === null) {
console.log(isLiveData.stream);
liveStatus = false;
}
else {
console.log(isLiveData.stream);
liveStatus = true;
}
});
$.getJSON(nowPlayingURL, function(playingNowData) {
var logo = playingNowData.logo;
var name = playingNowData.display_name;
if (liveStatus === true) {
status = playingNowData.status;
}
else{
status = "OFFLINE!";
}
if (logo === null || name === undefined) {
logo =
"https://lh3.googleusercontent.com/mqXuNXeLdlwm6WZdB12JCKQXXSymjGRQjdhqmWIlaGj6pc9iKFbQXm08aj0ZYL0MXif6ws4hz94x55E-qE86ck1ySZMq2E5KZ-iBWaN7y-Hqjd5dtNd_M9a_747MXs6LnolmHKZYWXGGc_KrCPQkEDJPes4Cnfo6pNbLt4wv3KUNKyjPWdxmc0kVi_EWfn7r252IQoJ-SL60bamUwBbtGBtL9jGOe69W1CR6NdAi9ikPQIR5YRmUA8YB3KmDwG5wtD3B7m9-voxD-0d0WM8Cf7snGQBUg10XjDKjlPRuhSG4fECwMjb7lN5uEFPEMZ9LsqdXv8eRAXlH3p6GzKPhpqznNT5sobv4CXZRDy5z6bPZWBS_ok_ytchJiJ52HKq96Tq-78fgWWiZvuyl1Z0AejrE1HbElsayFD-GU_eJLqR4VTjpw3jX7h9CMDcmOIivkXg6K4uUlZr13gx5YKCaEEnHLs_D2zZnqZ1_NCFLmHS6ORfuZL7m04L30DED3L5QkjfAIAVKYYtLr-1-5oERjlz6pOZKEvdX6jAWyaMDYPNaA0WX3AJHsiR6rdIbOY9SV6vJJLHnJL4Ab7fKWlKpEuwg4fwgq25g0Wm4AVvjay6xD6TvTUujreGaLuWh6x47yc-_RvI7Q-ohlWG9JTWxZSLV5P9Cpu7i=w521-h508-no";
}
$("#followerInfo").prepend(
"<div class='row'>" +
"<div class='col-md-4'>" +
"<img src='" +
logo +
"'>" +
"</div>" +
"<div class='col-md-4'>" +
// Added an anchor here for the name. Additional functionality :-)
"<a href='https://www.twitch.tv/" +
name +
"'target='_blank' >" +
name +
"</a>" +
"</div>" +
"<div class='col-md-4'>" +
status +
"</div></div>"
);
});
}
});
});
/*
Call the links this way:
"https://wind-bow.gomix.me/twitch-api/channels/" + channelName + "?callback=?"
"https://wind-bow.glitch.me/twitch-api/users/freecodecamp/follows/channels?callback=?"
*/
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
Raw
style.css
body {
background-image: url("https://lh3.googleusercontent.com/ILQ19QwlPA-wOe-hLWg2PQCLCC_VhvL0BzWFHjcvLX4rDQWWax8ihzRnrubd3OahXcNkjgHRKmHUln2td6UugMBdiPF2MbINGWARBgcpPKFrsCa12j7u2QVgwDuRJt-9VV4DyRUrDToC-GkI9MwL4WRt8PHitFkUnBM-7cqc5LvRoKEdICX5qaY0cOr96_TId7PpVkqVnl30-poSx97hiz9tpgwS-cqPLe80wNEcX0LJ05vW9zxgtpGvSU-AZdZe9g_Z_3AcbI50o3VxiPFietQ07ckxkhmo2AHhMxl8rqu6Vjee0GqHvlTQerCAnsmuf3QqN7pysPLPcLhLnEfQnLO3P2T3OHfRjomMLhzsd8mib-VvVUdSis-_cl9SevtA6Eq1hsPAZdEysU60VI1itUj9ZsRSQHYS1ayLEuUWwIBjbunaIgaq4mhvYleCiPavdtnPrJbnI9Dsbz8RLRzuL7yNDUOXNOJkfa8F56KyvW3EuinYRDzFsp0osJNZ0Qi84ltz-WHN7dK8v2kLMfOxy-NPNefNvbdeJqGApzpesLomwnRGy5o-WJQWEIPqlMbFhP0ta-JKOZtjUTp35u-A3BnvlHQBRa0RoEdK3Y2TOH_dcREFPW8_h7en50ts9psZhb3OR7zUyoxctQcyimoCM-kii2N6YsfT=w465-h696-no");
background-repeat: no-repeat;
background-color: black;
background-size: cover;
color: white;
font-family: allerta;
}
#fccStatus {
color: gold;
}
h2 {
color: gold;
}
img {
width: 100px;
border-radius: 20%;
}
.col-md-4{
padding: 5px;
}
.row {
background: rgba(0,0,0,.35);
border: 5px green solid;
border-radius: 25px;
margin-bottom: 10px;
}
#header {
background: rgba(0,0,0,.30);
border: 5px green solid;
border-radius: 25px;
margin-bottom: 10px;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment