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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

              
                <div class="container"><!--container div-->
  <div class="purple-border grey-background">
    <div  class="text-center"><!--title-->
      <h1 id="title">Twitch Streamers</h1>
    </div>
    <div class="row">
      <div class="col-lg-4">
        <button id="all-streamers" class="sort-buttons btn btn-default" type="button"><h4>All</h4></button>
      </div>
      <div class="col-lg-4">
        <button id="online-streamers" class="sort-buttons btn btn-default" type="button"><h4>Online</h4></button>
      </div>
      <div class="col-lg-4">
        <button id="offline-streamers" class="sort-buttons btn btn-default" type="button"><h4>Offline</h4></button>
      </div>
    </div>
    <div id="streamer-list">
    </div>
    <div class="text-center footer">
      <footer id="footer">By 
          <a           href='https://codepen.io/bugsinthecode/full/bgNEaG/'title='Addison Dalton Personal Projects Site' target='_blank'> Addison Dalton
          </a>     
        </footer>
    </div>
  </div>
</div><!--end container div-->
              
            
!

CSS

              
                /*controls the width of the container for different screens*/
@media (min-width: 568px) {
  .container {
    margin-top:50px;
    width: 550px;
  }
}
@media (min-width: 992px) {
  .container {
    margin-top:50px;
    width: 550px;
  }
}
@media (min-width: 1200px) {
  .container {
    margin-top:50px;
    width: 550px;
  }
}
/*screen control end*/

/*various html element changes*/
body{
  background-color:#0e1717;
}

hr{
  height:1px;
  border:none;
  background-color:#9923c4;
  box-shadow: 0px 0px 10px white;
  width:94.5%;
}
/*various html changes end*/

/*non specific css class*/
.img-responsive{
  text-align:center;
  margin-top:20px;
}

.grey-background{
  background-color:#252626;
  box-shadow: 0px 0px 20px  black;
}

.purple-border{
  border: solid #9923c4 3px;
  border-radius:5px;
}

.white-text{
  color:white;
  font-family: 'Comfortaa', monospace;
}
/*non specific classes end*/

#title{
  font-size:60px;
  color:white;
  font-family: 'VT323', monospace;
  text-shadow: 0px 0px 10px purple;
}
/*sort button classes*/
.btn-default{
  border-radius: 5px 5px 0px 0px;
  border-top:solid black 1px;
}
.sort-buttons{
  display:block;
  width: 100%;
}

.sort-buttons:focus{
  background-color:grey;
  color:white;
  outline:none;
}

.sort-buttons:hover{
  box-shadow:0px 0px 10px purple;
}
/*sort button end*/

/*for stream list*/
#streamer-list{
background-color:grey;}

#streamer-name{
  padding-top:8px;
  font-family:'Orbitron',sans-sarif;
  text-shadow: 0px 0px 8px black;
  margin-left:10px;
  margin-right:10px;
}
/*logo classes*/
.logo-border{
  border-radius:50%;
  border:solid #9923c4 1px;
  box-shadow: 0px 0px 10px black;
}
.logo-border:hover{
  box-shadow: 0px 0px 60px 5px white;
}

.placeholder-logo{
  border-radius:50%;
  box-shadow: 0px 0px 10px black;
  width:55%;
}
/*logo classes end*/

.online{
  text-shadow: 0px 0px 15px #9923c4;
  color:white;
  font-family: 'Comfortaa', monospace;
}

.offline{
  color:#cecece;
  font-family: 'Comfortaa', monospace;
}
#game{
  margin-left:20px;
  margin-right:20px;
}
/*for stream list end*/

/*footer*/
.footer{
  background-color:#252626;
  color:white;
}
              
            
!

JS

              
                $(document).ready(function(){
  
  //----place focus on all-streamers button----
  $("#all-streamers").focus();
  
  //call getStreams function on page load
  //default call is for ALL streamers,online and offline
  getStreamers("Both");
  
  //get streamers function
  function getStreamers(buttonStatus){
  //remove previous streamers listed, keeps from clogging up page,
   $("#streamer-list").empty();
   //hide footer so it doesn't 'pop' up the page
   //while the streamers list is populated
   $("#footer").hide();
    var streamerArray=[
      "ESL_SC2", 
      "OgamingSC2", 
      "Totalbiscuit", 
      "freecodecamp", 
      "Vinesauce", 
      "T90Official", 
      "Stodeh", 
      "noobs2ninjas",
      "Boogie2988",
      "Robbaz",
      "comster404"
    ]

    //loop through every streamer
    $(streamerArray).each(function(index){

      //get channel data
      $.getJSON("https://wind-bow.gomix.me/twitch-api/channels/" + streamerArray[index] + "?callback=?",function(channelData){
         console.log(channelData);

        //get stream data
        $.getJSON("https://wind-bow.gomix.me/twitch-api/streams/" + channelData.name + "?callback=?",function(streamData){
         var streaming = streamData.stream;
          //checks if channel still exists
         if(channelData.error === "Not Found" && buttonStatus === "Both"){
           displayPlaceholder(channelData.message);
         }else{
          //checks if streamer is online or not
          if(streaming === null && buttonStatus != "online" && channelData.error != "Not Found"){
            //passes offline if offline, no stream info passed
            displayStreamers("Offline",'offline', "", "");

          }else if(buttonStatus != "offline"){
            //passes online with stream info
            displayStreamers("Online",'online',"Currently playing "+streaming.game, streaming.viewers + " viewers");
          };
         };
          
          //displays the streamers by appending each to the streamer-list div
          function displayStreamers(onlineStatus, cssClass, game, viewers){
          //display streamers on screen
            $("#streamer-list").append(
            //---title area, streamer logo and name---
            "<div id='streamer'>"+
            "<div class='row'>"+//row
              "<div class='col-s-12'>"+//col
                "<div class='img-responsive text-center'>"+//logo and title
                  '<a href="'+channelData.url+'" target="_blank">'+
                    '<img class="logo-border" title='+channelData.name+' src='+channelData.logo+'>'+//logo
                  '</a>'+
                  '<h2 id="streamer-name" class="white-text">'+channelData.name+'</h2>'+//name
                "</div>"+//logo and name end 
               "</div>"+//title col end
              "</div>"+//title row end
              //---title end---

              //---streamer info, online or offline---
              //---viewer count and what they are streaming---
              "<div class='row text-center'>"+//streamer info row
               "<div class='col-lg-6'>"+//offline col
                "<h4 class="+cssClass+">" + onlineStatus + "</h4>"+
               "</div>"+//offline col end
               "<div class='col-lg-6'>"+//viewer count col
                "<h4 class='white-text'>"+viewers+"</h4>"+
               "</div>"+//viewers count end
              "</div>"+//streamer info end

              //---streamed game if any---
              "<div class='row text-center'>"+//streamed game row
               "<div class='col-12-lg'>"+//streamed game col
                  "<h5 id='game' class='white-text'>"+game+"</h5>"+
               "</div>"+//streamed game col end
              "</div>"+//streamed game row end
              "<hr></hr>"+
              "</div>"
              //---streamed game end---
            );//streamer append end 
          };// displayfunction call end
          
          //display a placeholder img and name of
          //user that does not exist
          function displayPlaceholder(message){
            $("#streamer-list").append(
            //---title area, streamer logo and name---
            "<div id='streamer'>"+
            "<div class='row'>"+//row
              "<div class='col-s-12'>"+//col
                "<div class='img-responsive text-center'>"+//logo and title
                  '<img class="placeholder-logo" title="User does not exist" src="http://i63.tinypic.com/20z1ser.jpg">'+
                  '<h5 id="streamer-name" class="white-text">'+message+'</h5>'+//name
                "</div>"+//logo and name end 
               "</div>"+//title col end
              "</div>"+//title row end
              "<hr></hr>"
              //---title end---
          )};//placeholder function end
          
          //show footer once list has been populated
          $("#footer").show();
        });//get stream data end
      });//get channel data end
    });//streamer array loop end
  };//getStreamer function end
  
  
  //----buttons to get all, online, or offline streamers----
  
  //all
  $("#all-streamers").on("click",function(){
    //empty streamer list and call getStreamer
    $("#streamer-list").empty();
    getStreamers("Both");
  });
  
  //online
  $("#online-streamers").on("click",function(){
    //empty streamer list and call getStreamer
    $("#streamer-list").empty();
    getStreamers("online");
  });
  
  //offline
  $("#offline-streamers").on("click",function(){
    //empty streamer list and call getStreamer
    $("#streamer-list").empty();
    getStreamers("offline");
  });
  
  //function to remove all click classes from sort button
  function removeButtonClass(){
    //remove old classes
    $("#all-streamers").removeClass("clicked-button");
    $("#online-streamers").removeClass("clicked-button");
    $("#offline-streamers").removeClass("clicked-button");
  }
  //----sort buttons end----
  
});//document ready end
              
            
!
999px

Console