LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

   
  



  



CSS
#status {
/*   font-family: 'Press Start 2P', cursive; */
  font-size: 1em;
  letter-spacing: 0px;
  color: #121212;
  text-transform: uppercase;
}

body {
 background-image : url(https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-417752.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size:cover;
}
.container{
/*  padding: 5px; */
/*  background-color:purple; */
 margin: 10px auto;
/*  border-radius:15px; */
  posistion:relative;
  z-index: 2;
  box-shadow: 0 8px 16px -6px black;
}

.lobuki {
  max-width: 35px;
  max-height: auto;
  border-radius: 50%;
  position: absolute;
/*   left: 90%; */
/*   border: 1px solid white; */
  margin: 9px auto;
} 

.fa-ban {
  position: absolute;
/*   left: 90%; */
  margin: 9px auto;
}

.jumbotron {
  font-size: 2.5em;
  padding:50px;
  margin: 10px auto;
}

#twitchlogo {
  max-width: 40%;
  max-height: auto;
  position:relative;
  right: -30%
}

@media (max-width: 800px) {

  #logo {
    display:none;
  }
  #user, #game, #status {
    font-size: 20px;
    line-height: 40px;
    margin: auto 28px;
  }
  
 
JS
//RUN JQUERY
$(document).ready(function(){
  // GLOBAL ARRAY
  var streams = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
	//FREECODECAMP STREAM INFO & STATUS API CALL
	$.getJSON('https://api.twitch.tv/kraken/streams/freecodecamp?client_id=nx374mszvb1907c7p0yfdw3yapeo0x').done(function(data) {
		  // console.log(data);
        if(data.stream === null) {
          $("#fccStatus").html(" is offline");
        } else {
          $("#fccStatus").html(" is online!");  
        }
    });
  
      for ( i = 0 ; i < streams.length; i++){
        $.ajax({
          type: 'GET',
          url: 'https://api.twitch.tv/kraken/channels/' + streams[i],
          headers: {
            'client-ID':'nx374mszvb1907c7p0yfdw3yapeo0x'
          },
          success: function(data1){
            console.log(data1);
            
            
           $.getJSON('https://api.twitch.tv/kraken/streams/' + data1.name + '?client_id=nx374mszvb1907c7p0yfdw3yapeo0x').done(function(data2) {
            console.log(data2);
            // CREATE NAME VARIABLE FOR THE LOOP
            var name = data2._links.self.slice(37);
            var logo = data1.logo; 
            // console.log(name);
            if(data2.stream === null) {
             $('#user').append(''+ name +'
'); $('#status').append('offline
') $('#game').append('N/A
') $('#logo').append('
') } else { $('#user').append(''+ name +'
'); $('#status').append('online
') $('#game').append(data2.stream.game + '
'); $('#logo').append("" + '
'); } }); }, error: function(err){ alert("Error: User not Found"); $('#user').append('Invalid User
'); $('#status').append('Not Found
') $('#game').append('N/A
') } }); }; })

Description

TWITCH API JSON manipulation though AJAX per FCC's Front End Certificate program.
Wed, 12/27/2017 - 07:04

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv