A Pen by Rexmorgan89 on CodePen.
Created
February 6, 2017 23:41
-
-
Save rexmorgan89/65d8c4093415fcab2b1271ad807dddc9 to your computer and use it in GitHub Desktop.
Twitch TV WebApp
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" style="width:60%;text-align:center"> | |
| <h2>Twitch Live Streamers</h2> | |
| <div class="row"> | |
| <div class="col-md-12" id="liveStreams"></div> | |
| </div> | |
| <div class=" row"> | |
| <div class="btn btn-default col-md-4 col-xs-12" id="allStreamers">All</div> | |
| <div class="btn btn-default col-md-4 col-xs-12" id="onlineStreamers">Online</div> | |
| <div class="btn btn-default col-md-4 col-xs-12" id="offlineStreamers">Offline</div> | |
| </div> | |
| </div> | |
| </body> | |
| <footer id="footer"> | |
| <h6 style="color:white">Designed by: | |
| <a href="https://www.linkedin.com/in/andrew-frimpong-a42aa763?trk=nav_responsive_tab_profile" target="blank" style="color:white;">Andrew Frimpong</a> and powered by <a href = "https://dev.twitch.tv/docs" target ="blank"style="color:white;">Twitch</a> | |
| </h6> | |
| </footer> |
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 html = ""; | |
| var streamNames = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404"]; | |
| function channelListings(channel) { | |
| $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/' + channel, function(json) { | |
| if (json.stream === null) { | |
| $.getJSON('https://wind-bow.gomix.me/twitch-api/channels/' + channel, function(data) { | |
| if (data.error === "Not Found") { | |
| var streamChannelName = channel; | |
| var streamLogo = "https://cdn4.iconfinder.com/data/icons/business-vol-4-2/100/Artboard_15-256.png"; | |
| var streamTitle = data.message; | |
| $("#liveStreams").append("<div class='offlineStream row'><span id='close'>x</span><img class ='smaller-image thick-white-border ' src='" + streamLogo + "'><h3 class = >" + streamChannelName + "</h3><h4>" + streamTitle + "</h4></div>"); | |
| } else { | |
| var twitchChannel = data; | |
| var streamChannelName = twitchChannel.display_name; | |
| var streamLogo = twitchChannel.logo; | |
| var streamURL = twitchChannel.url; | |
| var streamTitle = twitchChannel.status; | |
| $("#liveStreams").append("<a href =" + streamURL + " target='+blank'><div class='offlineStream row'><span id='close'>x</span><img class ='smaller-image thick-white-border ' src='" + streamLogo + "'><h3 class = >" + streamChannelName + "</h3><h4>Offline</h4></div></a>"); | |
| } | |
| }); | |
| } else { | |
| var twitchChannel = json.stream.channel; | |
| var streamChannelName = twitchChannel.display_name; | |
| var streamLogo = twitchChannel.logo; | |
| var streamURL = twitchChannel.url; | |
| var streamTitle = twitchChannel.status; | |
| $("#liveStreams").append("<a href =" + streamURL + " target='+blank'><div class='onlineStream row'><span id='close'>x</span><img class ='smaller-image thick-white-border ' src='" + streamLogo + "'><h3 class =>" + streamChannelName + "</h3><h4 class = >" + streamTitle + "</h4></div></a>"); | |
| } | |
| }); | |
| } | |
| $(document).ready(function() { | |
| for (i = 0; i < streamNames.length; i++) { | |
| channelListings(streamNames[i]); | |
| } | |
| $("#allStreamers").click(function() { | |
| $(".onlineStream").show(); | |
| $(".offlineStream").show(); | |
| }); | |
| $("#offlineStreamers").click(function() { | |
| $(".onlineStream").hide(); | |
| $(".offlineStream").show(); | |
| }); | |
| $("#onlineStreamers").click(function() { | |
| $(".onlineStream").show(); | |
| $(".offlineStream").hide(); | |
| }); | |
| $(document).on('click', "#close", function(){ | |
| $(this).parent().hide(); | |
| return false; | |
| }); | |
| }); |
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{ | |
| background-color: navy; | |
| } | |
| .btn { | |
| border-radius:0 0 10px 10px; | |
| } | |
| .container { | |
| width:70%; | |
| text-align:center; | |
| padding:50px | |
| } | |
| div { | |
| font-family: Roboto, GillSans, Calibri, Trebuchet, sans-serif; | |
| color:white; | |
| margin-bottom:2px; | |
| } | |
| #liveStreams { | |
| background-color:lightblue; | |
| height:500px; | |
| padding:50px; | |
| overflow:scroll; | |
| border-radius:10px 10px 0 0; | |
| } | |
| .smaller-image { | |
| width: 100px; | |
| } | |
| .thick-white-border { | |
| border-color: white; | |
| border-width: 5px; | |
| border-style: solid; | |
| border-radius: 100%; | |
| } | |
| .offlineStream, .onlineStream { | |
| color:black; | |
| text-decoration:none; | |
| background-color:#E5E5E5; | |
| margin:10px 40px 20px 40px; | |
| padding:10px 10px 10px 40px; | |
| text-align:left; | |
| border-radius: 4px; | |
| border-left:solid 5px #242F40; | |
| } | |
| .offlineStream:hover, .onlineStream:hover { | |
| border-left:solid 5px #CCA43B; | |
| text-decoration:none; | |
| } | |
| #footer { | |
| width: 100%; | |
| text-align: center | |
| } | |
| #close { | |
| float:right; | |
| display:inline-block; | |
| padding:2px 5px; | |
| background:#ccc; | |
| } | |
| #close:hover { | |
| float:right; | |
| display:inline-block; | |
| padding:2px 5px; | |
| background:#ccc; | |
| color:#fff; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment