FreeCodeCamp TwitchTV ex

freecodecamp-twitchtv-ex.markdown

FreeCodeCamp TwitchTV ex

A Pen by Maureen Hernandez on CodePen.

License.

index.html

<div class="container">
  <h1>Twitch TV API client</h1>
  <div class="table-responsive">
  <table class="table table-striped">
    <tr>
      <th>Channel</th>
      <th>Status</th>
      <th>Channel Link</th>
    </tr>
  </table>
  </div>  
</div>

script.js

$(document).ready(function(){
  
  var channelStream = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
    
  var url = 'https://wind-bow.hyperdev.space/twitch-api/streams/';
  
  var htmlStr = '';
  
  function getState(element){
    
    $.getJSON(url+element+'?callback=?', function(data) {
      
      htmlStr += '<tr><td>'+element+'</td>';
      
     if (data.stream === null){
       htmlStr += '<td class="warning">Offline</td>';   
     }else if (data.stream === undefined){
       htmlStr += '<td class="danger">Account close</td>';    
     } else{
       htmlStr += '<td class="success">Online <br> airing: ' +data.stream.game+'</td>';
     }
      htmlStr += '<td> <a href="'+data._links.channel+'">'+element+'</a></td></tr>';
       
      $("table").append(htmlStr);
       htmlStr = ""
    });

  }
  channelStream.forEach(getState);
  
  
});

scripts

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

style.css

td, th{
  text-align:center;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />