LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


Twitch

Twitchtv JSON API

Free Code Camp is currently

CSS
header, section, footer, aside, nav, main, article, figure {display: block;}

* {
    box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
} 

html, body {
	display: block;
	-webkit-font-smoothing: antialiased;
	border: 0;
	margin: 0; 
	padding: 0; 
	font-size: 100%; 
	font-family: Verdana, Tahoma, Arial, sans-serif;
	width: 100%;
	height: 100%;
	background:;
	color: #232525;
}
.container .jumbotron {
  border-radius: 8%;
}
#fccp {
  color: rgba(100, 65, 164, 0.7);
  text-align: center;
  font-size: 1.8em;
  text-decoration: none;
}
#fccp:hover {
  color: rgba(100, 65, 164, 0.85);
}
a:hover {
  text-decoration: none;
}
.col-sm-4 {
  text-align: center;
  margin: 20px auto;
}
#str1 img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  margin: auto;
  padding: 10px;
}
#str2 a, #str3 p{
  font-size: 1.1em;
  margin: auto;
  padding: 10px;
  display: block;
  vertical-align: center;
}
.row:nth-child(odd){
  background: rgba(100, 65, 164, 0.25);
}
.row:nth-child(even) {
  background:rgba(100, 65, 164, 0.32);
}
.row:hover {
  background:rgba(100, 65, 164, 0.4);
}
JS
$(document).ready(function(){
    var twitch = [
    "ESL_SC2",
    "OgamingSC2",
    "cretetion",
    "freecodecamp",
    "storbeck",
    "habathcx",
    "RobotCaleb",
    "noobs2ninjas"
  ];
   
  var i;
  var t = twitch.length;
  
    //users, streams, channels
 // $.getJSON(https://api.twitch.tv/kraken/users/freecodecamp?client_id=71xs3e98fgsyxuvpbaj6g3sn96gqp6).done(function(data){});
 // $.getJSON(url, function(data){});
  $.ajax({
    type: "GET",
    url: "https://api.twitch.tv/kraken/streams/freecodecamp",
    headers: {
      "Client-ID": "71xs3e98fgsyxuvpbaj6g3sn96gqp6"
    },
    success: function(dataCamp){  // success simulira done
      //console.log(dataCamp);
      if(dataCamp.stream === null){  // status
       $("#fccs").html(" OFFLINE");
      }else {
        $("#fccs").html(" ONLINE");
      }
    }
  });
  for (i = 0; i < t; i++) {
    $.ajax({
    type: "GET",
    url: "https://api.twitch.tv/kraken/channels/" + twitch[i],
    headers: {
      "Client-ID": "71xs3e98fgsyxuvpbaj6g3sn96gqp6"
    },
    success: function(dataFor){
      // console.log(dataFor);
      $.getJSON('https://api.twitch.tv/kraken/streams/' + dataFor.name + '?client_id=71xs3e98fgsyxuvpbaj6g3sn96gqp6').done(function(data){
        // console.log(data);
      if(data.stream === null){
        $("#row").prepend('
logo

is offline

'); $("#str3 p").css("color", "red"); }else { $("#row").prepend('
logo

' + data.stream.game + ' is online

'); $("#str4 p").css("color", "green"); } // $("#row").prepend('
'); // $(".row").append('
'); // $("#str1").append('logo
'); // $(".row").append('
'); // $("#str2").append('' + dataFor.display_name + '
'); // $(".row").append('
'); // $("#str3").append('

is offline

'); // // $("#str3 p").css("color", "red"); // }else { // $("#row").prepend('
'); // $(".row").append('
'); // $("#str1").append('logo
'); // $(".row").append('
'); // $("#str2").append('' + dataFor.display_name + '
'); // $(".row").append('
'); // $("#str3").append('

is online

'); // $("#str3 p").css("color", "green"); // } }); // var logo = data.twitch[i].channel.logo; // var name = data.twitch[i].channel.display_name; // var status = data.twitch[i].channel.status; }, // success error: function(err){ //alert("Error user not found"); } }); // ajax } // for loop // Sledeći CSS style ne radi urađen je u css-u: // $("div.row:odd").css("background", "rgba(100, 65, 164, 0.25)"); // $("div.row:even").css("background", "rgba(100, 65, 164, 0.32)"); // $("div.row:odd").hover( // function() { // $(this).css("background", "rgba(100, 65, 164, 0.4)"); // }, // function() { // $(this).css("background", "rgba(100, 65, 164, 0.32)"); // } // ); // $("div.row:even").hover( // function() { // $(this).css("background", "rgba(100, 65, 164, 0.4)"); // }, // function() { // $(this).css("background", "rgba(100, 65, 164, 0.25)"); // } // ); });
Term
Wed, 12/27/2017 - 06:58

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv