Twitch API FFC

In this example below you will see how to do a Twitch API FFC with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Twitch API FFC</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="header">
  <div class="container">
    <div id="twitch-table">
      <h1 class="text-center"><i class="fa fa-twitch" aria-hidden="true"></i>
                       TWITCH STREAMERS <i class="fa fa-twitch" aria-hidden="true"></i>
                   </h1>
      <div class="col-md-6 btn-group btn-group-justified" role="group" aria-label="...">
        <div class="btn-group" role="group">
          <button id="all-btn" type="button" class="btn btn-default">All</button>
        </div>
        <div class="btn-group" role="group">
          <button id="online-btn" type="button" class="btn btn-default">Online</button>
        </div>
        <div class="btn-group" role="group">
          <button id="offline-btn" type="button" class="btn btn-default">Offline</button>
        </div>
      </div>
      <br>
      <br>
      <hr>

      <div id="streamers">
        <div>
          <div id="online" class="text-center"></div>
          <div id="offline" class="text-center"></div>
          <div id="deleted-user" class="text-center"></div>
        </div>
      </div>
      <br>
    </div>
  </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/roker2401993/twitch-api-ffc-xgVZBO */
body{
    background-color: white;
    font-size: large;
}
#twitch-table{
    border: 1px solid grey;
}
#twitch-table h1{
    color: #888888;
}
hr{
    padding-top: 1px;
    margin-top: 5px;
}

.fa-twitch{
    color: rebeccapurple;
}
.fa-twitch:hover{
    color: #888888;;
}

#all-btn{
    background-color: rebeccapurple;
    color: white;

}
#online-btn{
    background-color: #2ecc71;
    color: white;
}
#offline-btn{
   background-color:#c0392b;
    color: white;
}

.offline-well{
    background-color: #c0392b;
    color: white;
    border: 2px solid grey;
    margin-bottom: 4px;

}
a{
    color:white;
}
img{
    float: left;
    width:40px;
    height: 40px;
    border:2px solid grey;
}

.online-well{
    background-color:#2ecc71;
    color: white;
    border: 2px solid grey;
    margin-bottom: 4px;
}
.deleted-well{
    background-color:darkgray;
    color: white;
    border: 2px solid grey;
    margin-bottom: 4px;
}
#streamers{
    width: 75%;
    margin: 0 auto;
}
.fa-eye{
    color:darkgray;
}
@media all and (max-width: 700px)
{
   #twitch-table h1{
       font-size:large;
    }
}

/*Downloaded from https://www.codeseek.co/roker2401993/twitch-api-ffc-xgVZBO */
$(document).ready(function(){
    var streamers =
        ["ESL_SC2","OgamingSC2","cretetion","freecodecamp","storbeck","habathcx","RobotCaleb","noobs2ninjas","brunofin","comster404"];

    var twitchCallBack= function(){
        var url ="https://api.twitch.tv/kraken/streams/" + streamers[i] +"?client_id=7slsxf0da18e4dn8rou1dw1ji1oxsca";
        $.ajax({
            url:url,
            dataType:'jsonp',
            type:"GET",
            success:function(data){
                // check if user is online or offline or has been deleted
                if(data.stream === null){
                    updateOffline(data);
                }
                else if(data.message){
                    updateDeleted(data);
                }
                else
                {
                    updateOnline(data);
                }
            },
            error:function(){
                console.log("error");
            }
        });
        //update DOM
        var updateOnline = function(data){
            console.log(url + " " + "is online");
            $("#online").append("<div class=\"online-well well container-fluid\">"+"<img  class=img-circle src="+ data.stream.channel.logo +">"+"<p>"+"<a target='_blank' href="+
                data.stream.channel.url + ">" + data["stream"]._links["self"].substr(37)+": "+
                data.stream.game +" "+"("+data.stream.viewers+"<i class='fa fa-eye'></i>"+")"+"</a>"+"</p>"+"</div>");

        };

        var updateOffline = function(data) {
            var offlineUrl = data._links.channel+"?client_id=7slsxf0da18e4dn8rou1dw1ji1oxsca";
            $.ajax({
                url:offlineUrl,
                dataType:"jsonp",
                type:"GET",
                success:function(offlineData){
                    console.log(url + " " + "is offline")
                    $("#offline").append("<div class=\"offline-well well container-fluid\">"+"<img  class=img-circle src="+ offlineData.logo +">"+"<p>"+"<a target='_blank' href="
                        + offlineData.url+">"+
                        data["_links"].self.substr(37)+"</a>"+"</p>"+"</div>");

                },
                error:function(){
                    console.log("error");
                }

            });


        };
        var updateDeleted = function(data){
            console.log(url + " "+"does not exist");
            $("#deleted-user").append("<div  class=\"deleted-well well container-fluid\">"+"<img  class=img-circle src='https://66.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_500.png'>"+"<p>" +
                data.message+"</p>"+"</div>");
        }
    };
    // loop through users
    for (var i = 0; i < streamers.length; i++){
        twitchCallBack()
    }

    $("#all-btn").click(function(){
        $("#online").show(1000);
        $("#offline").show(1000);
        $("#deleted-user").show(1000);
    });

    $("#offline-btn").click(function(){
        $("#online").hide(1000);
        $("#deleted-user").hide(1000);
        $("#offline").show(1000);
    });

    $("#online-btn").click(function(){
        $("#offline").hide(1000);
        $("#deleted-user").hide(1000);
        $("#online").show(1000);
    });
});

Comments