twitch-tv

In this example below you will see how to do a twitch-tv with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by dasriya, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dasriya ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>twitch-tv</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

  
  
</head>

<body>

  <div class="container">
<div id="header" class="text-center">
  <h1>TwitchTv JSON API</h1>
  <h2>Free Code Camp</h2>
  <a href="#"><h3 id="fccStatus"></h3></a>
 </div>
  <div class="row">
    <h1>
    <div class="col-md-4">
      Logo:
    </div>
    <div class="col-md-4">
      Name:
    </div>
    <div class="col-md-4">
      Status:
    </div>
    
    </h1>
  </div>
<div id="followerInfo">
  
  </div>


</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/dasriya/twitch-tv-LxLrqM */
$(document).ready(function(){
  var url="https://wind-bow.gomix.me/twitch-api";
  
$.getJSON(url,function(data1){
  if(data1.stream===null){
    $("#fccStatus").html("Free Code Camp is offline");
  }
  else{
    $("#fccStatus").html("Free Code Camp is online");
  }
  console.log(data1);
});
  
  var followerURL="https://api.twitch.tv/kraken/users/freecodecamp/follows/channels/";
  $.getJSON(followerURL,function(data2){
//console.log(data2);
});
  
});

Comments