Skip to content

Instantly share code, notes, and snippets.

@ar94952

ar94952/index.html

Created November 13, 2017 01:38
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 ar94952/9e3d9fd53daa359d0ddc3cb9fdf93557 to your computer and use it in GitHub Desktop.
Save ar94952/9e3d9fd53daa359d0ddc3cb9fdf93557 to your computer and use it in GitHub Desktop.
Download ZIP
Twitch TV FreeCodeCamp
Raw
index.html
<body>
<div class="container">
<!-- Header -->
<section class="main-menu">
<div class="title" id="header">
<img class="twitch-logo" src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c53d.png" />
</div>
<!-- Filters -->
<ul class="selector row">
<li class="square col-xs-4 active" id="all"><a href="#">All</a></li>
<li class="square col-xs-4" id="online"><a href="#">Online</a></li>
<li class="square col-xs-4" id="offline"><a href="#">Offline</a></li>
</ul>
</section>
<!-- Channel Info -->
<section class="users" id="users">
</section>
</div>
</body>
Raw
script.js
// Global variables
let usernames = ["esteban_playz", "MissKyliee", "sodapoppin", "bajheera", "MR_SLIN", "freecodecamp", "klopsgg", "XenosysVex", "Durppool"];
let cb = '?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm&callback=?';
let url = "https://api.twitch.tv/kraken/";
// Loop for each username
usernames.forEach(function(channel) {
function makeURL(type, name) {
return url + type + "/" + name + cb;
};
$.getJSON(makeURL("streams", channel), function(data) {
let game,
status;
if(data.stream === null) {
game = "Offline";
status = "offline";
} else if(data.stream === undefined) {
game = "Account closed";
status = "offline";
} else {
game = data.stream.game;
status = "online";
};
$.getJSON(makeURL("channels", channel), function(data) {
var logo = data.logo != null ? data.logo : "images/twitch-favicon.png",
name = data.display_name != null ? data.display_name : channel,
description = status === "online" ? ": " + data.status : "";
var html = '<div class="row channel ' + status + '"><div class="col-xs-2 col-sm-3" id="icon"><img src="' + logo + '" class="logo"></div><div class="col-xs-10 col-sm-8 name" id="name"><a href="' + data.url + '" target="_blank">' + name + '</a></div><div class="col-xs-10 col-sm-8 game" id="streaming">' + game + '<span class="hidden-xs">' + description + '</span></div></div>';
status === "online" ? $("#users").prepend(html) : $("#users").append(html);
});
});
});
// On Load
$(document).ready(function() {
// Active Status Box
$(" .square").click(function() {
var category = $(this).attr("id");
var button = $(".square");
// & Hide Streams (Status)
if(category === "all") {
button.removeClass("active");
$("#all").addClass("active");
$(".online, .offline").removeClass("hidden");
} else if(category === "online") {
button.removeClass("active");
$("#online").addClass("active");
$(".online").removeClass("hidden");
$(".offline").addClass("hidden");
} else if (category === "offline") {
button.removeClass("active");
$("#offline").addClass("active");
$(".offline").removeClass("hidden");
$(".online").addClass("hidden");
}
});
});
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Raw
style.scss
@import url(https://fonts.googleapis.com/css?family=Roboto:500);
$color1: #a0a2af;
$color2: #fff;
$background: (to left, $color2, $color1);
$main-menu: #fff;
$online: #b8cca1;
$offline: #f4abab;
$white: #f2f2f2;
$box-shadow: #7c7979;
$twitch: #6441a4;
$active: #433f4a;
html {
background-color: $background;
box-sizing: border-box;
color: $white;
font-family: "Raleway", "New Times Roman";
font-size: 18px;
}
html,
body {
background: -webkit-linear-gradient($background);
background: linear-gradient($background);
}
// Container
.container {
box-shadow: 4px 7px 7px $box-shadow;
height: auto;
margin: 3% auto;
padding: 0;
width: 600px;
}
.main-menu {
background-color: $main-menu;
padding: 2% 0 0;
}
// Header
.title {
display: block;
margin: 0 auto;
width: 100%;
}
.twitch-logo {
display: block;
height: 100px;
margin: 0 auto;
text-align: center;
width: auto;
padding: 17px;
}
// Filters (Buttons)
.selector {
display: inline-flex;
height: inherit;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.square {
background-color: $twitch;
border: 1px solid $main-menu;
border-bottom: 0;
border-radius: 2px;
color: $white;
display: inline-block;
margin: 0;
padding: 15px;
text-align: center;
&:first-child {
border-left: 0;
}
&:last-child {
border-right: 0;
}
&:hover {
cursor: pointer;
transform: scale(1.05);
transition: transform .25s ease-in-out;
}
a {
text-decoration: none;
color: $white;
font-family: Roboto;
}
}
.active {
background-color: $active;
}
// Twitch Users
.channel {
padding: 2% 0;
margin: 0;
border-bottom: 1px solid $white;
&:last-child {
border-bottom: 0;
}
}
.online {
background-color: $online;
}
.offline {
background-color: $offline;
}
.logo {
max-width: 50px;
max-height: 50px;
border-radius: 50%;
border-color: $white;
margin-right: 20px;
}
.name {
font-size: 14px;
}
.game {
font-size: 10px;
}
@media (max-width: 768px) {
#name, #streaming {
text-align: center;
}
#name {
padding-top: 10px;
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment