Created
June 18, 2017 10:41
-
-
Save lseffer/442a3fb322ea41252792d5adf301c87e to your computer and use it in GitHub Desktop.
qjZVNL
This file contains hidden or 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="container page jumbotron"> | |
| <div class="container titlebar"> | |
| <h1>Twitch API Freecodecamp</h1> | |
| <p>Channels are updated every 20 seconds.</p> | |
| </div> | |
| <div class="container outer"> | |
| </div> | |
| <div id=footer>Leonard Seffer</footer> | |
| </div> | |
| </body> |
This file contains hidden or 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
| var channels = ["eulcs1", "freecodecamp", "AdmiralBulldog", "comster404", "habathcx", "RobotCaleb", "noobs2ninjas"]; | |
| function printConsole(json) { | |
| if (json != null) { | |
| console.log(json); | |
| } | |
| } | |
| function createHTMLfromChannel(json, channel) { | |
| var outer = $(".outer"); | |
| var channelid = channel; | |
| if ($(".channelinfo." + channelid).length === 0) { | |
| if (json.error) { | |
| outer.append( | |
| "<div class='row channelinfo " + | |
| channelid + | |
| "'> <div class=col> <img src=https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Anti.svg/600px-Anti.svg.png height=50 width=50> <a href=#>" + | |
| channel + | |
| "</a><span class='streamstatus'>Channel removed or never existed</span>" + '</div>'+ | |
| '<div class="circle offline"></div>' + | |
| "</div>" | |
| ); | |
| } else { | |
| outer.append( | |
| "<div class='row channelinfo " + | |
| channelid + | |
| "'><div class=col> <img src=" + | |
| json.logo + | |
| " height=50 width=50> <a href=" + | |
| json.url + | |
| ">" + | |
| json.display_name + | |
| "</a>" + | |
| "<span class='streamstatus " + | |
| channelid + | |
| "'> </span>" + '</div>'+ | |
| '<div class="circle offline"></div>' + | |
| "</div>" | |
| ); | |
| } | |
| } | |
| } | |
| function checkOnline(json, channel) { | |
| if (json.stream) { | |
| $(".channelinfo." + channel) | |
| .find(".circle") | |
| .removeClass("offline") | |
| .addClass("online"); | |
| if(json.stream.channel.status.length>40){ | |
| $(".streamstatus." + channel).text(json.stream.channel.status.substring(0,40)+' ...'); | |
| } else { | |
| $(".streamstatus." + channel).text(json.stream.channel.status); | |
| } | |
| } else { | |
| $(".channelinfo." + channel) | |
| .find(".circle") | |
| .removeClass("online") | |
| .addClass("offline"); | |
| } | |
| } | |
| function getChannelInfo(channel, callback) { | |
| $.getJSON( | |
| "https://wind-bow.glitch.me/twitch-api/channels/" + channel, | |
| function(json) { | |
| callback(json, channel); | |
| } | |
| ); | |
| } | |
| function getStreamInfo(channel, callback) { | |
| $.getJSON( | |
| "https://wind-bow.glitch.me/twitch-api/streams/" + channel, | |
| function(json) { | |
| callback(json, channel); | |
| } | |
| ); | |
| } | |
| function updateChannelInfo() { | |
| for (var i = 0; i < channels.length; i++) { | |
| getChannelInfo(channels[i], createHTMLfromChannel); | |
| getStreamInfo(channels[i], checkOnline); | |
| } | |
| console.log("Updated channels."); | |
| } | |
| $(document).ready(function() { | |
| updateChannelInfo(); | |
| window.setInterval(updateChannelInfo, 20000); | |
| }); |
This file contains hidden or 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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
This file contains hidden or 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 { | |
| font-family: Calibri; | |
| } | |
| #footer { | |
| position:absolute; | |
| bottom:0; | |
| width:100%; | |
| } | |
| .streamstatus { | |
| margin-left:10px; | |
| } | |
| .page { | |
| width:600px; | |
| margin:auto; | |
| } | |
| .titlebar { | |
| width:100%; | |
| /* background:#AEAEAE; */ | |
| padding:10px; | |
| } | |
| .channelinfo { | |
| padding:5px; | |
| } | |
| .circle { | |
| width:20px; | |
| height:20px; | |
| border-radius:20px; | |
| font-size:10px; | |
| color:#fff; | |
| vertical-align: bottom; | |
| margin-top:15px; | |
| /* line-height:100px; */ | |
| /* text-align:right; */ | |
| } | |
| .circle.online { | |
| background: green; | |
| } | |
| .circle.offline { | |
| background: red; | |
| } |
This file contains hidden or 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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.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