Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
  <link href="https://fonts.googleapis.com/css?family=Saira+Condensed" rel="stylesheet">
</head>



<body>
<!--   <div class='container-fluid'>
    
  </div> -->
    <div class='text-center' id="border">
      <h1 id="font">Twitch TV JSON API</h1>
      <h2 id="fcc" target="_blank"></h2>
    </div>

<!--     <div class='spacer'></div>

    <div id="border">
      <div class='row'>
        <div class='col-md-3' id='channel'>
          Channel:<br>
        </div>
        <div class='col-md-3' id='status'>
          Status:<br>
        </div>
        <div class='col-md-3' id='game'>
          Game:<br>
        </div>
        <div class='col-md-3' id="logo">
          Logo:
      </div> -->
     <!--  <div id='follower'>Remove me<div> -->
<!--     </div> -->

      <div class="container">
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Channel.." title="Type in a name">
  <table id="myTable">
  <tr class="header">
    <th style="width:25%;color:#FAF0E6">Channel</th>
    <th style="width:25%;color:#FAF0E6">Status</th>
    <th style="width:25%;color:#FAF0E6">Game</th>
    <th style="width:25%;color:#FAF0E6">Logo</th>
<!--     <th style="width:25%;color:#FAF0E6" scope="col" id="logo">Logo</th>  -->
    </tr>
<!--   <tr>
    
    <td id="channel"style="color:red"></td>
    <td id="status"></td>
    <td id="game"></td>
   //Storing all objects within the same table data leads to them being in a row of the table header
  </tr> -->
<!-- There's no need for the code above as I am requesting the objects from an API, so I will need to rearrange the table data based on the objects.      -->
</table>
   <div class='spacer'></div>
<!-- Padding so there's space between the logo and the table-->
<!--   </div> -->

        
        </body>
  
              
            
!

CSS

              
                body{
  background-image:url('https://www.twitch.tv/p/assets/uploads/combologo_474x356.png');
}
#border {
    background-color: #000000;
    color: white;
    padding: 50px;
    width: 35%;
    margin-right: auto;
    margin-left: auto;
    border-radius: 0px;
    font-size: 1.5em;
    padding-bottom: 2%;
    } 
  a{
  color:white;
}
/* .spacer {
    padding: 1%;
  }
 */
/* * {
  box-sizing: border-box;
} */

 #myInput {
 background-position: 10px 10px; 
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid red;
  margin-bottom: 12px;
  
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
  background-color:black;
  
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
  color:red;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}
#channel{
  color:red;
}
#font, #fcc, .header, #channel, #status, #game {
  font-family: 'Saira Condensed', sans-serif;
}
.intro{
  color:green;
}

.online {
  color:green;
}
/* #imgs{
  height:300px;
  width:150px;
} */
              
            
!

JS

              
                
 var follower = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  //An array of users or in this case, streamers that will be placed on the document.
  $.ajax({
    type: 'GET',
    url: 'https://api.twitch.tv/kraken/streams/freecodecamp', 
    headers: {
      'client-ID': 'ziu3fledjh14rd812socrwluiz1o31'
    },
    // Twitch requires a client id to request their data now. You can bypass this by using the https://wind-bow.glitch.me/twitch-api/streams/ESL_SC2?callback=? url to request certain objects. However, some objects won't be available if you do choose to bypass registering for a client_id.
    success: function(data) {
      
      if (data.stream === null) {
        $('#fcc').html(' FreeCodeCamp is Offline');//.html will completely replace the contents of the tag, whereas append will add onto the end of the tag.
      } else {
        $('#fcc').html('<span class="online"> FreeCodeCamp is Online!</span>');
      }
    }, 
    error: function(err) {
      alert("Error");
    }
  });

  for (var i = 0; i < follower.length; i++) {
//The for loop iterates through each follower of the url so that the objects for each user is requested for the channel, status, and game being played
    $.ajax({
      type: 'GET',
      url: 'https://api.twitch.tv/kraken/streams/' + follower[i], 
      headers: {
        'client-ID': '59x9ex7f5zzongzntqx0zrwleoxy12'
      },
      //use getJSON to see difference in declaring
      //You could also use $.getJSON and use the client_Id as a token to request Twitch's objects.a
      success: function(dataI) {
        var name = dataI._links.self.slice(37)
        getLogo(name);
        //This slices through the url of the object so that the only thing that remains is the name of the user of the channel
       
        console.log(name);
        // console.log(follower);
        // if (dataI.stream === null) {
        //   $('#status').append(' is Offline<br>')
        //   $('#channel').append('<a target="blank" href="https://www.twitch.tv/' + name + '">' + name + '</a><br>')
        //   $('#game').append('N/A<br>');
        // } else {
        //   $('#status').append(' is Online<br>')
        //   $('#channel').append('<a target="blank" href="https://www.twitch.tv/' + name + '">' + name + '</a><br>')
        //   $('#game').append(dataI.stream.game + '<br>');
        // }
      
        if(dataI.stream === null){
       //table data contains objects
          //Line 54 is used as a reference for what's outside of the scope of this local scope
          $('#myTable').append('<tr class="'+name.toLowerCase()+'">'+
            '<td><a target="blank" href="https://www.twitch.tv/'+name + '">' + name +
            '<td>Offline</td>'+
             '</a></td>'+
            '<td>N/A</td>')
        
      } 
         else{
           $('#myTable').append('<tr class="'+name.toLowerCase()+'">'+
            '<td><a target="blank" href="https://www.twitch.tv/'+name + '">' + name +
            '<td><span class= "online">Online</span></td>'+
             '</a></td>'+
            '<td><span class="online">'+( dataI.stream.game ||'N/A')+'</span></td>');
      }
// You can change the color of an event by adding a span tag to the condition
// Unexpected string when I try to pull out the property value from Twitch JSON
     },
      error: function(err) {
        alert("Some users are no longer available");
      }
   }
          );
  }
   //Difference request for objects using a different url-- makes it easier to seek out specific properties and their corresponding values 
   
 // The function below calls on the previous name in the second ajax function to find the logo for each channel 
  function getLogo(name){
     $.ajax({
      type:'GET',
      url:'https://api.twitch.tv/kraken/channels/'+ name,
      headers:{
      'client-ID': '59x9ex7f5zzongzntqx0zrwleoxy12'
      },
      success: function(d2){
       var logo = d2.logo || 'http://jesusldn.com/wp-content/uploads/2015/06/noimage.png';
           $('#myTable tr[class='+d2.name+']').append('<td><img src="'+logo+'" height="50" ></td>')
      // I will append the image from Twitch's JSON and if not, I will set a default image for channels that exist but don't have a logo
      
      }
        
      }
    )
  }
    
  
  
  

   
   //Logo doesn't function properly due to the rows of the objects being in the same row.
   
   
   
   
//  }
  
  







function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();       // table setup for on-key search
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (let i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
              
            
!
999px

Console