LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Twitch Streamers

CSS
body {
  font-family: "Roboto";
  background-image:url("https://static.pexels.com/photos/89699/pexels-photo-89699.jpeg");
  background-repeat:no-repeat;
  background-size: 1920px 1080px;
}
.img-circle {
  border-radius: 50%;
}
.img {
  height: 50px;
  width: 50px;
}

.container {
  background-color: #173a47;
  color: white;
}

#online-button {
  background-color: #11720d;
}

#offline-button {
  background-color: #424242;
}

.offline {
  background-color: #424242;
  opacity: 0.8;
}
.online {
  background-color: #11720d;
  opacity: 0.8;
}

#title {
  background-color: #13424c;
}

#list {
  margin-bottom: 30px;
}
JS
//listed channels
channels = [
  "ESL_SC2",
  "OgamingSC2",
  "cretetion",
  "freecodecamp",
  "storbeck",
  "habathcx",
  "RobotCaleb",
  "noobs2ninjas"
];

$(document).ready(function() {
  //Get data for all channels
  for (var i = 0; i < channels.length; ++i) {
    //To keep the i values for each repetition
    (function(i) {
      setTimeout(function() {
        var currentRow = "#row" + i;
        var currentImg = "img" + i;
        var currentUser = "#user" + i;
        var currentGame = "#game" + i;

        //Used for fixing
        // console.log("I am at row " + currentRow);

        //Json-call for stream data
        $.getJSON(
          "https://wind-bow.gomix.me/twitch-api/channels/" +
            channels[i] +
            "?callback=?",

          function(data) {
            console.log(data);
            var result = data;

            //set logo
            var img = document.getElementById(currentImg);
            img.src = data.logo;

            //set username
            $(currentUser).html(data.name);
            $(currentUser).attr("href", data.url);

            //set game and description
            $(currentGame).html(data.game);
            $(currentGame).append(" - " + data.status);

            
           
          } //end data function
        ); //end JSON
        
        //JSON2 call for online status
          $.getJSON(
          "https://wind-bow.gomix.me/twitch-api/streams/" +
            channels[i] +
            "?callback=?",

          function(a) {
            console.log(a);
            var res = a;
            
            //check if online
            if(a.stream == null || undefined){
               $(currentRow).removeClass("online");
              $(currentRow).addClass("offline");
            }
            else{
                $(currentRow).removeClass("offline");
              $(currentRow).addClass("online");
              
            }
              
          } //end data function2
        ); //end JSON2
      }, 500);
    })(i);
  }
}); //end document ready

//show all streams
$("#all-button").on("click", function() {
  $(".offline").fadeIn();
  $(".online").fadeIn();
});

//Only show online streams
$("#online-button").on("click", function() {
  $(".offline").hide();
  $(".online").fadeIn();
});

//Only show offline streams
$("#offline-button").on("click", function() {
  $(".offline").fadeIn();
  $(".online").hide();
});

Description

Built this for the fourth intermediate project on FreeCodeCamps Front-End-Development-Certificate.
Wed, 12/27/2017 - 07:04

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv