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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <body>
  <div style='width:84%;' class='container'>
    <div class="card-header">
      <ul id="Nav-items" class="nav card-header-pills justify-content-center">
        <li id="channels" class="nav-item"><a class="btn btn-link nav-link active" href="#channelList" data-toggle="tab" role="tab">Channels</a></li>
        <li id="streaming" class="nav-item"><a class="btn btn-link nav-link" data-toggle="tab" role="tab" href="#streamingList">Online</a></li>
        <li id="offline" class="nav-item"><a class="btn btn-link nav-link" data-toggle="tab" role="tab" href="#offlineList">Offline</a></li>
      </ul>
    </div>
    <div class="card-block">
      <h2 class="card-title text-center" style="color:white;">Who's Streaming</h2>
      <h6 class="card-subtitle text-center subtitle">Check out who is streaming right now!</h6>
    </div>
    <div class="tab-content">
      <div id="channelList" class="tab-pane fade show active" role="tabpanel">
        <div id="users" class="list-group action">
        </div>
      </div>
      <div id="streamingList" class="tab-pane fade" role="tabpanel">
        <div id="streamingUsers" class="list-group">
        </div>
      </div>
      <div id="offlineList" class="tab-pane fade" role="tabpanel">
        <div id="offlineUsers" class="list-group">
        </div>
      </div>
    </div>
  </div>
</body>
              
            
!

CSS

              
                $bcg: #6441A4; $bcgd: #4e3282; $h6c: #BDBDBD; $bchfa: #553693; $margin: -5px 10px 0 0; $txt-shdw: 3px 2px black;

body {
  background-color: $bcg;
  h2 {
    text-shadow: $txt-shdw;
  }
  h6 {
    color: $h6c;
    text-shadow: $txt-shdw;
  }
  h5 {
    font-size:1.5em;
  }
  a {
    .active {
      text-shadow: $txt-shdw;
      background-color: $bcgd;
    }
  }
 .list-group-item {
  background-color: $bcgd;
  color: white;
  } 
  .list-group-item-action:hover, .list-group-item-action:active, .list-group-item-action:focus {
  background-color: $bchfa;
  color: white;
  }
}



div {
  .status {
    padding: 7px 0 0 0;
    margin:0 0 -8px 0
  }
  blockquote {
    font-size:.9em;
  }
  .card-header {
    background-color:#4e3282;
  }
  #content {
    width:75%;
  }
}
i, img {
  margin: $margin;
}
li {
  .active:focus, .active:hover, .active:active {
    color:white !important;
  }
  .nav-link {
    color: #BDBDBD;
    text-shadow: 1px 2px black;
  }
}

.btn-link:hover {
  color: white;
}


              
            
!

JS

              
                
// Doc.ready function
$("document").ready(function() {
//   variables used for api calls
  var apiChannels = "https://wind-bow.glitch.me/twitch-api/channels/",
      twitchUsers = [
    "ESL_SC2",
    "OgamingSC2",
    "cretetion",
    "freecodecamp",
    "storbeck",
    "habathcx",
    "RobotCaleb",
    "noobs2ninjas"
  ];

  //click functions for tabs
  $("#channels a").click(function(e) {
    e.preventDefault();
    $("this").tab("show");
  });
  $("#streaming a").click(function(e) {
    e.preventDefault();
    $("this").tab("show");
  });
  $("#offline a").click(function(e) {
    e.preventDefault();
    $("this").tab("show");
  });

  //functions to populate streamer list **look for better single function solution**
  function userChannelList() {
    //get json request using above variables
    $.getJSON(apiChannels + twitchUsers[i], function(data) {
      //checks if the twitch user is streaming or if they don't have a logo, and generates their listing with an icon instead
      if (data.status === null || data.logo === null) {
        $("#users").append(
          "<a id='user" +
            i +
            "' class='list-group-item list-group-item-action' target='blank' href ='"+ data.url + "'>" +
            "<i class='fa fa-check-circle fa-3x' aria-hidden='true' style='color:red;width:50px;'></i><h5 class='mb-1 title'>" +
            data.display_name +
            ":</h5><div class='container'><blockquote class='card-block-quote status'>Offline</blockquote></div></a>"
        );
      } else {
        $("#users").append(
          "<a id='user" +
            i +
            "' class='list-group-item list-group-item-action' href = '" + data.url + "'target='blank'><img style='height:45px;' class='rounded-circle' src='" +
            data.logo +
            "'/><h5 class='mb-1 title'>" +
            data.display_name +
            ":</h5><div class='container'><blockquote class='card-block-quote status'>" +
            data.status +
            "</blockquote></div></a>"
        );
      }
    });
  }
  function streamingChannelList() {
    $.getJSON(apiChannels + twitchUsers[i], function(data) {
      if (data.status !== null) {
        $("#streamingUsers").append(
          "<a id='user" +
            i +
            "' class='list-group-item list-group-item-action' href = '" + data.url + "'target='blank'><img style='height:45px;' class='rounded-circle' src='" +
            data.logo +
            "'/><h5 class='mb-1 title'>" +
            data.display_name +
            ":</h5><div class='container'><blockquote class='card-block-quote status'>" +
            data.status +
            "</blockquote></div></a>"
        );
      }
    });
  }
  function offlineChannelList() {
    $.getJSON(apiChannels + twitchUsers[i], function(data) {
      if (data.status === null) {
        $("#offlineUsers").append(
          "<a id='user" +
            i +
            "' class='list-group-item list-group-item-action title' target='blank' href ='"+ data.url + "'>" +
            "<i class='fa fa-check-circle fa-3x' aria-hidden='true' style='color:red;width:50px;'></i><h5 class='title mb-1'>" +
            data.display_name +
            ":" + "</h5><div class='container'><blockquote class='card-block-quote status'>Offline</blockquote></div></a>"
        );
      }
    });
  }
  
  //Runs functions in a loop, to populate lists. Bootstrap tabs nav attributes show lists accordingly.
  for (var i = 0; i < twitchUsers.length; i++) {
    userChannelList();
    streamingChannelList();
    offlineChannelList();
  }
});

// neat little function to make the api calls list
// function listCreate(array) {
//   var twitchApiCalls = [];
//   for (var i = 0; i < array.length; i++) {
//     twitchApiCalls.push(
//       "https://wind-bow.glitch.me/twitch-api/channels/" + array[i]
//     );
//   }
//   return twitchApiCalls;
// }

//no longer useful code, kept only for record keeping
// function streaming() {
//   for (var i = 0; i<)
//   $.getJSON(apiStreams + twitchUsers[i])
// }

// Deprecated status object setting function to be used inside of
//jsonrequest to make finding online vs offline channels easier
// became too hard to implement, searching new methods
// function addStatus() {
//  var obj = {};
//    if (data.status !== null) {
//      obj[twitchUsers[i]] = data.status;
//      twitchUsersStreamStatus.push(obj);
//    } else {
//      obj[twitchUsers[i]] = 'offline';
//      twitchUsersStreamStatus.push(obj);
//    }
// }

// Tried to find a way to list only the streaming channels, switched to tabs method in bootstrap v4
// function listStreaming() {
//     $(".offline").css("visibility", "hidden");
//     $("a #streaming").addClass("active");
//     $("a #channels").removeClass("active");
//   }

              
            
!
999px

Console