A Pen by VSN Reddy Janga on CodePen.
Created
February 28, 2016 13:00
-
-
Save janga1997/b858542292c48be0197a to your computer and use it in GitHub Desktop.
Twitch.tv
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <div class="header"> | |
| <p>Twitch.Tv</p> | |
| <div class="well"> | |
| <button class="online">Online</button> | |
| <button class="offline">Offline</button> | |
| <button class="all">All</button> | |
| </div> | |
| </div> | |
| <div class='list'> | |
| </div> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| var array = ["freecodecamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff", "brunofin", "comster404", "test_channel", "cretetion", "sheevergaming", "TR7K", "OgamingSC2", "ESL_SC2"]; | |
| for (var key in array) { | |
| $.getJSON("https://api.twitch.tv/kraken/streams/" + array[key], function(json_1) { | |
| if (json_1.stream === null) { | |
| $.getJSON(json_1._links.channel, function(json_2) { | |
| $(".list").append("<div class='test off'>" + "<img src='" + json_2.logo + "'>" + "<p>" + "<a href='" + json_2.url + "' target='_blank'>" + json_2.display_name + "</p>" + "</a>" + "<p>Offline</p>" + | |
| "</div>"); | |
| }); | |
| } | |
| else if (json_1.status===422) { | |
| $(".list").append("<div class='test off'>" + "<p>Account Closed</p>" + | |
| "</div>"); | |
| } | |
| else { | |
| $.getJSON(json_1._links.channel, function(json_2) { | |
| $(".list").append("<div class='test on'>" + "<img src='" + json_2.logo + "'>" + "<p>" + "<a href='" + json_2.url + "' target='_blank'>" + json_2.display_name + "</p>" + "</a>" +"<p>"+ json_1.stream.game +"</p>" + | |
| "</div>"); | |
| }); | |
| } | |
| }); | |
| } | |
| $(".offline").on("click", function() { | |
| $(".list").empty(); | |
| for (var key in array) { | |
| $.getJSON("https://api.twitch.tv/kraken/streams/" + array[key], function(json_1) { | |
| if (json_1.stream === null) { | |
| $.getJSON(json_1._links.channel, function(json_2) { | |
| $(".list").append("<div class='test off'>" + "<img src='" + json_2.logo + "'>" + "<p>" + "<a href='" + json_2.url + "' target='_blank'>" + json_2.display_name + "</p>" + "</a>" + "<p>Offline</p>" + | |
| "</div>"); | |
| }); | |
| } else if (json_1.stream === undefined) { | |
| $.getJSON(json_1._links.channel, function(json_2) { | |
| $(".list").append("<div class='test off'>" + "<p>Account Closed</p>" + | |
| "</div>"); | |
| }); | |
| } | |
| }); | |
| } | |
| }); | |
| $(".online").on("click", function() { | |
| $(".list").empty(); | |
| for (var key in array) { | |
| $.getJSON("https://api.twitch.tv/kraken/streams/" + array[key], function(json_1) { | |
| if (json_1.stream !== null) { | |
| $.getJSON(json_1._links.channel, function(json_2) { | |
| $(".list").append("<div class='test on'>" + "<img src='" + json_2.logo + "'>" + "<p>" + "<a href='" + json_2.url + "' target='_blank'>" + json_2.display_name + "</p>" + "</a>" +"<p>"+ json_1.stream.game + "</p>" + | |
| "</div>"); | |
| }); | |
| } | |
| }); | |
| } | |
| }); | |
| $(".all").on("click", function() { | |
| $(".list").empty(); | |
| for (var key in array) { | |
| $.getJSON("https://api.twitch.tv/kraken/streams/" + array[key], function(json_1) { | |
| if (json_1.stream === null) { | |
| $.getJSON(json_1._links.channel, function(json_2) { | |
| $(".list").append("<div class='test off'>" + "<img src='" + json_2.logo + "'>" + "<p>" + "<a href='" + json_2.url + "' target='_blank'>" + json_2.display_name + "</p>" + "</a>" + "<p>Offline</p>" + | |
| "</div>"); | |
| }); | |
| } else { | |
| $.getJSON(json_1._links.channel, function(json_2) { | |
| $(".list").append("<div class='test on'>" + "<img src='" + json_2.logo + "'>" + "<p>" + "<a href='" + json_2.url + "' target='_blank'>" + json_2.display_name + "</p>" + "</a>" + | |
| "</div>"); | |
| }); | |
| } | |
| }); | |
| } | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(https://fonts.googleapis.com/css?family=Trade+Winds); | |
| @import url(https://fonts.googleapis.com/css?family=Bangers); | |
| @import url(https://fonts.googleapis.com/css?family=Audiowide); | |
| .header>p { | |
| color:white; | |
| text-shadow:5px 5px 5px black; | |
| font-weight: bold; | |
| font-size: 7vh; | |
| margin-left: 5%; | |
| line-height: 15vh; | |
| font-family: Trade Winds; | |
| } | |
| p,.well{ | |
| display:inline-block; | |
| } | |
| .header { | |
| margin-bottom:1vh; | |
| margin-top: 5vh; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 50%; | |
| height: 15vh; | |
| background-color: grey; | |
| border-radius: 1vh; | |
| } | |
| .well{ | |
| background-color:transparent; | |
| border-color:transparent; | |
| vertical-align:middle; | |
| width:30%; | |
| margin-left:22%; | |
| } | |
| .well>*{ | |
| width:100%; | |
| font-family:Audiowide; | |
| font-size:2vh; | |
| } | |
| .online:hover{ | |
| background-color:green; | |
| transition:background-color linear 1s; | |
| } | |
| .offline:hover{ | |
| background-color:#ff4c4c; | |
| transition:background-color linear 1s; | |
| } | |
| .all:hover{ | |
| background-color:yellow; | |
| transition:background-color linear 1s; | |
| } | |
| .test{ | |
| margin-bottom:1vh; | |
| margin-left: 25%; | |
| width: 50%; | |
| height: 15vh; | |
| background-color: grey; | |
| border-radius: 1vh; | |
| } | |
| .test>img{ | |
| width:17%; | |
| height:15vh; | |
| } | |
| .test>p{ | |
| font-size:4vh; | |
| color:black; | |
| font-family:Bangers; | |
| margin-left:5%; | |
| } | |
| .test:hover{ | |
| box-shadow:7px 7px 7px black; | |
| transition: box-shadow linear 0.3s; | |
| } | |
| a{ | |
| color:white; | |
| text-decoration: none; | |
| } | |
| a:hover{ | |
| text-decoration: none; | |
| text-shadow:2px 2px 2px black; | |
| } | |
| .off{ | |
| background-color:red; | |
| } | |
| .on{ | |
| background-color:blue; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment