Created
February 7, 2017 21:16
-
-
Save furball514/c412aa60762f0052eba77774d8de1097 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
| <head> <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css?family=Mukta+Vaani" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1> <span class="fa fa-twitch fa-spin"> </span> A Pen By <a href="http://codepen.io/furball/" target="_blank"> <u> Karthik </u> </a> <span class="fa fa-twitch fa-spin"> </span></h1> | |
| <img src="http://media.bestofmicro.com/8/9/416313/gallery/twitch1_w_600.png" | |
| alt="twitch logo"> | |
| <div class="input"> | |
| <div> | |
| <input id="question1" name="question" type="radio" class="with-font" value="sel" /> | |
| <label for="question1">Show All</label> | |
| </div> | |
| <div> | |
| <input id="question2" name="question"type="radio" class="with-font" value="sel"/> | |
| <label for="question2">Offline</label> | |
| <div> | |
| <div> | |
| <input id="question3" name="question" type="radio" class="with-font" value="sel"/> | |
| <label for="question3">Online</label> | |
| </div> | |
| </div> | |
| <h1 id="headi"> <span class="fa fa-twitch fa-spin"> </span> Twitch TV Streamers <span class="fa fa-twitch fa-spin"> </span> </h1> | |
| <div id="one" class="row well fcc"> | |
| <div class="col-md-4" id="logo"> </div> | |
| <div class="col-md-4" id="dname"> </div> | |
| <div class="col-md-4" id="status"> </div> | |
| <!-- add span fa twitch with color code and optional spin--> | |
| <!-- <table> | |
| <tr> | |
| <th> logo </th> | |
| <th> display name </th> | |
| <th> status </th> | |
| </tr> | |
| </table> --> | |
| </div> | |
| <div id="two" class="row well"> | |
| <div class="col-md-4" id="logo1"> </div> | |
| <div class="col-md-4" id="dname1"> </div> | |
| <div class="col-md-4" id="status1"> </div> | |
| </div> | |
| <div id="three" class="row well"> | |
| <div class="col-md-4" id="logo2"> </div> | |
| <div class="col-md-4" id="dname2"> </div> | |
| <div class="col-md-4" id="status2"> </div> | |
| </div> | |
| <div id="four" class="row well"> | |
| <div class="col-md-4" id="logo3"> </div> | |
| <div class="col-md-4" id="dname3"> </div> | |
| <div class="col-md-4" id="status3"> </div> | |
| </div> | |
| <div id="five" class="row well"> | |
| <div class="col-md-4" id="logo4"> </div> | |
| <div class="col-md-4" id="dname4"> </div> | |
| <div class="col-md-4" id="status4"> </div> | |
| </div> | |
| <div id="six" class="row well"> | |
| <div class="col-md-4" id="logo5"> </div> | |
| <div class="col-md-4" id="dname5"> </div> | |
| <div class="col-md-4" id="status5"> </div> | |
| </div> | |
| <div id="seven" class="row well"> | |
| <div class="col-md-4" id="logo6"> </div> | |
| <div class="col-md-4" id="dname6"> </div> | |
| <div class="col-md-4" id="status6"> </div> | |
| </div> | |
| <div id="eight" class="row well"> | |
| <div class="col-md-4" id="logo7"> </div> | |
| <div class="col-md-4" id="dname7"> </div> | |
| <div class="col-md-4" id="status7"> </div> | |
| </div> | |
| </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
| function main () { | |
| var userArray = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"] ; | |
| //for (var i=0;i<userArray.length;i++) | |
| var url = 'https://wind-bow.gomix.me/twitch-api/channels/'+userArray[3]+'?callback=?'; | |
| var url1 = 'https://wind-bow.gomix.me/twitch-api/channels/'+userArray[0]+'?callback=?'; | |
| var url2 = 'https://wind-bow.gomix.me/twitch-api/channels/'+userArray[1]+'?callback=?'; | |
| var url3 = 'https://wind-bow.gomix.me/twitch-api/channels/'+userArray[2]+'?callback=?'; | |
| var url4 = 'https://wind-bow.gomix.me/twitch-api/channels/'+userArray[4]+'?callback=?'; | |
| var url5 = 'https://wind-bow.gomix.me/twitch-api/channels/'+userArray[5]+'?callback=?'; | |
| var url6 = 'https://wind-bow.gomix.me/twitch-api/channels/'+userArray[6]+'?callback=?'; | |
| var url7 = 'https://wind-bow.gomix.me/twitch-api/channels/'+userArray[7]+'?callback=?'; | |
| $.getJSON(url, function(data) { | |
| //console.log(data) | |
| $('#logo').html('<img class="jig" src='+data.logo+'>'); | |
| $('#dname').html('<a href='+'"' + data.url + '"' + 'target=_blank >' + data.display_name + '</a>'); | |
| $('#status').html(data.status); | |
| $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/'+userArray[3]+'?callback=?',function(data2){if (data2.stream === null){$('#status').append('<br>'+ '</br>' +' offline'); | |
| $('#one').addClass('offline'); } | |
| else if(data2.status === 422 || data2.status === 404) {$('#status').append('<br>'+ '</br>' +' Account Closed'); | |
| $('#one').addClass('offline'); } | |
| else | |
| {$('#status').append('<br>'+ '</br>' +' online'); | |
| $('#one').addClass('online');} | |
| }) ; | |
| }); | |
| $.getJSON(url1, function(data) { | |
| //console.log(data) | |
| $('#logo1').html('<img class="jig" src='+data.logo+'>'); | |
| $('#dname1').html('<a href='+'"' + data.url + '"' + 'target=_blank >' + data.display_name + '</a>'); | |
| $('#status1').html(data.status); | |
| $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/'+userArray[0]+'?callback=?',function(data2){ if (data2.stream===null){$('#status1').append('<br>'+ '</br>' +' offline'); | |
| $('#two').addClass('offline') ; } | |
| else if(data2.status === 422 || data2.status === 404) {$('#status1').append('<br>'+ '</br>' +' Account Closed'); | |
| $('#two').addClass('offline'); } | |
| else | |
| {$('#status1').append('<br>'+ '</br>' +' online'); | |
| $('#two').addClass('online');} }); | |
| }); | |
| $.getJSON(url2, function(data) { | |
| //console.log(data) | |
| $('#logo2').html('<img class="jig" src='+data.logo+'>'); | |
| $('#dname2').html('<a href='+'"' + data.url + '"' + 'target=_blank >' + data.display_name + '</a>'); | |
| $('#status2').html(data.status); | |
| $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/'+userArray[1]+'?callback=?',function(data2) {if (data2.stream===null){$('#status2').append('<br>'+ '</br>' +' offline'); | |
| $('#three').addClass('offline'); } | |
| else if(data2.status === 422 || data2.status === 404) {$('#status2').append('<br>'+ '</br>' +' Account Closed'); | |
| $('#three').addClass('offline'); } | |
| else | |
| {$('#status2').append('<br>'+ '</br>' +' online'); | |
| $('#three').addClass('online');} }); | |
| }); | |
| $.getJSON(url3, function(data) { | |
| // console.log(data) | |
| $('#logo3').html('<img class="jig" src='+data.logo+'>'); | |
| $('#dname3').html('<a href='+'"' + data.url + '"' + 'target=_blank >' + data.display_name + '</a>'); | |
| $('#status3').html(data.status); | |
| $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/'+userArray[2]+'?callback=?',function(data2) { if (data2.stream===null){$('#status3').append('<br>'+ '</br>' +' offline'); | |
| $('#four').addClass('offline'); } | |
| else if(data2.status === 422 || data2.status === 404) {$('#status3').append('<br>'+ '</br>' +' Account Closed'); | |
| $('#four').addClass('offline'); } | |
| else | |
| {$('#status3').append('<br>'+ '</br>' +' online'); | |
| $('#four').addClass('online');}}); | |
| }); | |
| $.getJSON(url4, function(data) { | |
| // console.log(data) | |
| $('#logo4').html('<img class="jig" src='+data.logo+'>'); | |
| $('#dname4').html('<a href='+'"' + data.url + '"' + 'target=_blank >' + data.display_name + '</a>'); | |
| $('#status4').html(data.status); | |
| $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/'+userArray[4]+'?callback=?',function(data2) { | |
| if (data2.stream===null){$('#status4').append('<br>'+ '</br>' +' offline'); | |
| $('#five').addClass('offline'); } | |
| else if(data2.status === 422 || data2.status === 404) {$('#status4').append('<br>'+ '</br>' +' Account Closed'); | |
| $('#five').addClass('offline'); } | |
| else | |
| {$('#status4').append('<br>'+ '</br>' +' online'); | |
| $('#five').addClass('online');} }); | |
| }); | |
| $.getJSON(url5, function(data) { | |
| //console.log(data) | |
| $('#logo5').html('<img class="jig" src='+data.logo+'>'); | |
| $('#dname5').html('<a href='+'"' + data.url + '"' + 'target=_blank >' + data.display_name + '</a>'); | |
| $('#status5').html(data.status); | |
| $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/'+userArray[5]+'?callback=?',function(data2) { | |
| if (data2.stream===null){$('#status5').append('<br>'+ '</br>' +' offline'); | |
| $('#six').addClass('offline'); } | |
| else if(data2.status === 422 || data2.status === 404) {$('#status5').append('<br>'+ '</br>' +' Account Closed'); | |
| $('#six').addClass('offline'); } | |
| else | |
| {$('#status5').append('<br>'+ '</br>' +' online'); | |
| $('#six').addClass('online');}}); | |
| }); | |
| $.getJSON(url6, function(data) { | |
| //console.log(data) | |
| $('#logo6').html('<img class="jig" src='+data.logo+'>'); | |
| $('#dname6').html('<a href='+'"' + data.url + '"' + 'target=_blank >' + data.display_name + '</a>'); | |
| $('#status6').html(data.status); | |
| $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/'+userArray[6]+'?callback=?',function(data2) { | |
| if (data2.stream===null){$('#status6').append('<br>'+ '</br>' +' offline'); | |
| $('#seven').addClass('offline'); } | |
| else if(data2.status === 422 || data2.status === 404) {$('#status6').append('<br>'+ '</br>' +' Account Closed'); | |
| $('#seven').addClass('offline'); } | |
| else | |
| {$('#status6').append('<br>'+ '</br>' +' online'); | |
| $('#seven').addClass('online');}}); | |
| }); | |
| $.getJSON(url7, function(data) { | |
| //console.log(data) | |
| $('#logo7').html('<img class="jig" src='+data.logo+'>'); | |
| $('#dname7').html('<a href='+'"' + data.url + '"' + 'target=_blank >' + data.display_name + '</a>'); | |
| $('#status7').html(data.status); | |
| $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/'+userArray[7]+'?callback=?',function(data2){ if (data2.stream===null){$('#status7').append('<br>'+ '</br>' +' offline'); | |
| $('#eight').addClass('offline'); } | |
| else if(data2.status === 422 || data2.status === 404) {$('#status7').append('<br>'+ '</br>' +' Account Closed'); | |
| $('#eight').addClass('offline'); } | |
| else | |
| {$('#status7').append('<br>'+ '</br>' +' online'); | |
| $('#eight').addClass('online');}}); | |
| }); | |
| $('#question1').click(function(){ | |
| $('.online').removeClass('hide'); | |
| $('.offline').removeClass('hide'); | |
| }); | |
| $('#question2').click(function(){ | |
| $('.online').addClass('hide'); | |
| $('.offline').removeClass('hide'); | |
| }); | |
| $('#question3').click(function(){ | |
| $('.offline').addClass('hide'); | |
| $('.online').removeClass('hide'); | |
| }); | |
| /* $.getJSON('https://wind-bow.gomix.me/twitch-api/streams/'+'brunofin'+'?callback=?',function(data3) { | |
| console.log(data3.status); | |
| if(data3.status === 422 || data3.status === 404) {} | |
| $('#headi').html(''); | |
| /* TEST: ACCOUNT CLOSED | |
| TEST RESULT:SUCCESS | |
| }); */ | |
| } | |
| $(document).ready(main); |
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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/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
| * {margin:0; | |
| padding:0;} | |
| body {background:url("https://www.digitalsurgeons.com/images/uploads/thoughts-mastheads/twitch-youtube-1400x475.jpg") top center; | |
| } | |
| img { | |
| display:block; | |
| margin:auto; | |
| width:50%; | |
| } | |
| .well {background-image: -webkit-linear-gradient(#6441A5, #FFF); | |
| font-family:'Permanent Marker',sans-serif; | |
| font-size:1.5em; | |
| } | |
| #dname,#status {font-family:'Mukta Vaani',sans-serif !important; | |
| } | |
| .fcc {background-image: -webkit-linear-gradient(#006401, #FCFFFE)} | |
| .jig {border-radius:50%;} | |
| h1 {background-color:#6441A5; | |
| text-align:center; | |
| color: black;} | |
| a { | |
| color: black; | |
| text-decoration: none; | |
| } | |
| #headi {font-family:'Permanent Marker',sans-serif;} | |
| input[type=radio].with-font, | |
| input[type=checkbox].with-font { | |
| border: 0; | |
| clip: rect(0 0 0 0); | |
| height: 1px; | |
| margin: -1px; | |
| overflow: hidden; | |
| padding: 0; | |
| position: absolute; | |
| width: 1px; | |
| } | |
| input[type=radio].with-font, | |
| input[type=checkbox].with-font { | |
| border: 0; | |
| clip: rect(0 0 0 0); | |
| height: 1px; | |
| margin: -1px; | |
| overflow: hidden; | |
| padding: 0; | |
| position: absolute; | |
| width: 1px; | |
| } | |
| input[type=radio].with-font ~ label:before, | |
| input[type=checkbox].with-font ~ label:before { | |
| font-family: FontAwesome; | |
| display: inline-block; | |
| content: "\f1db"; | |
| letter-spacing: 10px; | |
| font-size: 1.4em; | |
| color: #6441A5; | |
| width: 1.6em; | |
| } | |
| input[type=radio].with-font:checked ~ label:before, | |
| input[type=checkbox].with-font:checked ~ label:before { | |
| content: "\f00c"; | |
| font-size: 1.6em; | |
| color: #6441A5; | |
| letter-spacing: 5px; | |
| } | |
| input[type=checkbox].with-font ~ label:before { | |
| content: "\f096"; | |
| } | |
| input[type=checkbox].with-font:checked ~ label:before { | |
| content: "\f046"; | |
| color: #6441A5; | |
| } | |
| input[type=radio].with-font:focus ~ label:before, | |
| input[type=checkbox].with-font:focus ~ label:before, | |
| input[type=radio].with-font:focus ~ label, | |
| input[type=checkbox].with-font:focus ~ label | |
| { | |
| color: #6441A5; | |
| } | |
| label {font-size:1.3em;} | |
| /*custom css radio buttons inspired by | |
| Rick Strahi*/ | |
| .hide {display:none;} | |
| .input {background-color:orange} |
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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.9/font-awesome-animation.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment