A Pen by mohammedadem on CodePen.
Created
July 17, 2016 12:20
-
-
Save mohamma548/c1bf35847e34126da1c9c310b1451d3d to your computer and use it in GitHub Desktop.
Twitch tv
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
| <div class="container"> | |
| <p>TwitchTv JSON API</p> | |
| <a href="https://www.twitch.tv/freecodecamp" target=_blank> | |
| <div class="fcc">Free code camp is:</div></a> | |
| <form class="form-inline text-center"> | |
| <input type="search"class="form-control" id= "inp" size="30" placeholder="search for user name" required> | |
| <button type="button"class="btn btn-default"> <span class="glyphicon glyphicon-search"></span>Search</button> | |
| <div class="rows"> | |
| <div class="col-sm-4"></div> | |
| <div class="col-sm-4 channelDisp"> | |
| <div class="row1"> | |
| <div class="col-sm-6">User Name</div> | |
| <div class="col-sm-6">Status</div> | |
| </div> | |
| <div class="display"> | |
| </div> | |
| </div> | |
| <div class="col-sm-4 "></div> | |
| </div> | |
| </div> |
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
| $(document).ready(function(){ | |
| // freecode camp streaming | |
| var url1= 'https://api.twitch.tv/kraken/streams/freecodecamp'; | |
| $.getJSON(url1,function(data){ | |
| // the status of Free code camp | |
| if(data.stream==null){ | |
| // the stream is offline | |
| $(".fcc").html("Free Code Camp is:OFFLINE"); | |
| } | |
| else if(data.error){ | |
| // the stream is not available | |
| $(".fcc").html("Free Code Camp is:NOT AVAILABLE"); | |
| } | |
| else { | |
| // the stram is online | |
| $(".fcc").html("Free Code Camp is:ONLINE"); | |
| } | |
| }); | |
| // ---------END of Free code camp-------- | |
| //displaying a series of streaming | |
| var userAccounts=["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas","comster404","brunofin"]; | |
| userAccounts.forEach(chStreams => { | |
| var logo ="", | |
| url="", | |
| status="", | |
| banner=""; | |
| $.getJSON('https://api.twitch.tv/kraken/channels/'+chStreams, data => { | |
| logo = data.logo; | |
| banner=data.profile_banner; | |
| url = data.url; | |
| }); | |
| $.getJSON('https://api.twitch.tv/kraken/streams/'+chStreams, function(data) { | |
| if(data.stream == null){ | |
| status="Offline"; | |
| } | |
| else if(data.error){ | |
| status= "unavailable"; | |
| } | |
| else{ | |
| status="online"; | |
| } | |
| $(".display").prepend('<div class="row"><div class="col-sm-6"><a target="_blank" href="'+url+'"><img src="'+logo+'" height="80" width="80"><h4>'+ chStreams +'</h4></div><div class="col-sm-6"><h5>'+status+'</h5></div></div></a>') | |
| }); | |
| }); | |
| }); |
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://code.jquery.com/jquery-2.2.4.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
| .container{ | |
| background-color:#F5B3B3; | |
| margin-top:25px; | |
| padding:2px; | |
| } | |
| .container p { | |
| font-family: lobster; | |
| font-size: 40px; | |
| text-align: center; | |
| text-shadow:2px 2px; | |
| } | |
| .fcc{ | |
| font-family: lobster; | |
| font-size: 20px; | |
| text-align: center; | |
| text-shadow:1px 1px Green; | |
| } | |
| .channelDisp{ | |
| background-color:#F4EAEA; | |
| text-align:center; | |
| } | |
| .row1{ | |
| font-size:16px; | |
| color:#F5BF2C; | |
| } | |
| .rows{ | |
| margin:15px; | |
| } |
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://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