Twitch Tv Stremers

index.haml

.container
  #title
    %h1 Twitch Streamers
  #nav
    %ul.nav.nav-pills
      %li#p1.active
        %a{:href => "#"}  All
      %li#p2
        %a{:href => "#"} Online
      %li#p3
        %a{:href => "#"} Offline
  #result

script.js

var ch = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404"];
var jsoninfo = [];

//------------------------------------------------------------
//featching content from jsoninfo array and adding to html
function geton() {
  var html = "";
  for (var i = 0; i < jsoninfo.length; i++) {
    if (jsoninfo[i].state === "online") {
      var name = ch[i];
      var link = "https://www.twitch.tv/" + name;
      var info = jsoninfo[i].stream.game;
      html += "<div class=\"resdiv onbg\">" +
        "<div class=\"row\">" +
        "<div class=\"col-xs-4\">" +
        "<a href=\"" + link + "\">"+
      "<h4>" + name + "</h4></a></div>" +
        "<div class=\"col-xs-8\">" +
        "<h5>" + info + "</h5>" +
        "</div>" +
        "</div></div>";
    }}
    $("#result").append(html);
  }

  function getoff() {
    var html = "";
    for (var i = 0; i < jsoninfo.length; i++) {
      if (jsoninfo[i].state === "offline") {
        var name = ch[i];
        var link = "https://www.twitch.tv/" + name;
        html += "<div class=\"resdiv offbg\">" +
          "<div class=\"row\">" +
          "<div class=\"col-xs-4\">" +
          "<a href=\"" + link + "\">"+
        "<h4>" + name + "</h4></a></div>" +
          "<div class=\"col-xs-8\">" +
          "<h5>" + "Offline" + "</h5>" +
          "</div>" +
          "</div></div>";
      }}
      $("#result").append(html);
    }

    function getnull() 
    {
      var html = "";
      for (var i = 0; i < jsoninfo.length; i++) {
        if (jsoninfo[i].state === "unav") {
          var name = ch[i];
          html += "<div class=\"resdiv nullbg\">" +
            "<div class=\"row\">" +
            "<div class=\"col-xs-4\">" +
            "<a>"+
          "<h4>" + name + "</h4></a></div>" +
            "<div class=\"col-xs-8\">" +
            "<h5>" + "Not Available" + "</h5>" +
            "</div>" +
            "</div></div>";
        }
      }
        $("#result").append(html);
      }
      //------------------------------------------------------------------------------
      //button functionality
      function p1func() {
        var html = "";
        $("#result").html(html);
        geton();
        getoff();
        getnull();
      }

      function p2func() {
        var html = "";
        $("#result").html(html);
        geton();
      }

      function p3func() {
        var html = "";
        $("#result").html(html);
        getoff();
      }
      //------------------------------------------------------------
      //get json and push the recived objects into jsoninfo array
      function getjsonp() {
        for (var i = 0; i < ch.length; i++) {
          var link = 'https://api.twitch.tv/kraken/streams/' + ch[i] + '?callback=?';
          $.getJSON(link, function(data) {
            if (data.hasOwnProperty('status'))
              data.state = "unav";
            else if (data.stream === null)
              data.state = "offline";
            else
              data.state = "online";
            jsoninfo.push(data);
          });
        }
      }
      //-----------------------------------------------------------
      //navigation button pills activations
      function pills() {
        $("li").each(function() {
          $(this).removeClass("active");
        });
        $(this).addClass("active");
      }

      //------------------------------------------------------------
      //events listeners

      $(document).ready(function() {
        getjsonp();
        $(window).on("load",p1func);
        $("li").on("click", pills);
        $("#p1").on("click", p1func);
        $("#p2").on("click", p2func);
        $("#p3").on("click", p3func);
      });

scripts

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

style.stylus

body
  font-family "Comic Sans MS",cursive,sans-serif
  color white
  margin auto auto
  text-align center
  background-image url("http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/black-wallpaper-7.jpg")
  background-size cover
  background-attachment fixed
  #title,
  #result
    margin 10px auto
  #nav
   max-width 270px
   margin 10px auto
   padding 0 0
   li
     width 80px
     a
       color white
  #result
    max-width 600px
    .resdiv
      padding 2px
      margin 8px
      color white
      border-radius 4px
      opacity 0.8
    .onbg
      border 1px solid grey
      background-color #2ecc71
      a
        color white
    .onbg:hover
      background-color #2ecc71
      box-shadow 2px 2px 1px #888
    .offbg
      border 1px solid grey
      background-color #e74c3c
      a
        color white
    .offbg:hover
      background-color #e74c3c
      box-shadow 2px 2px 1px #888
    .nullbg
      border 1px solid grey
      background-color #34495e
      a
        color white
    .nullbg:hover
      background-color #34495e
      box-shadow 2px 2px 1px #888

styles

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

twitch-tv-stremers.markdown

Twitch Tv Stremers

A Pen by Abhishek on CodePen.

License.