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

              
                <div class="container">  
  <div class="row heading">
    <div class="col-xs-6 col-xs-offset-3 text-center"> 
      Twitch TV Streamers
    </div>
  </div>
  <div class="row nav">
    <div class="col-xs-12 inside-nav">
      <ul class="navigation list-inline">
        <li id = "allID" class="col-xs-4 all">
          <h4>All</h4>
          <p>View all channels</p>
        </li>
        <li id="onlineID" class="col-xs-4 online">
          <h4>Online</h4>
          <p>View online channels</p> 
        </li> 
        <li id="offlineID" class="col-xs-4 offline">
          <h4>Offline</h4>
          <p>View offline channels</p>
        </li>
      </ul>
    </div>
  </div>
  <div class="channels"> 
    <div class="col-xs-12">
      <div class="results "></div> 
    </div>
  </div>
</div>
<footer class="footer">
  <p>Made with <i class="fa fa-heart" aria-hidden="true"></i> by Ganeshan Dash
</footer>
              
            
!

CSS

              
                $background: #D6CAEC;
$white: #fff;
$green: #66c257;
$red: #ED1E4A;
$list-background: #7C63A6;

@mixin box-shadow-on-hover($color) {
  box-shadow: inset 5px -5px $color;
  }
html, body {
  min-height: 100vh;
}
body {
  // padding: 0;
  // margin: 0;
  // width: 100%;
  background-color: $background;
  display: flex;
  flex-direction: column;
}
.container {
  flex:1 0 auto;
}
.heading {
  padding-top: 40px;
  color: #7C63A6;
  font-weight: bold;
  font-size: 40px;
}

.nav {
  padding:0;
  
  margin-top: 40px;
  // margin: 0 auto;
  display: flex;
  color: #fff;
  // border: solid 1px;
  box-sizing: border-box;
  box-shadow: 0 2px 10px 2px grey;
  //remove the extra padding and margin added by bootstrap
  .inside-nav {
    padding:0 !important;
    // margin:0 !important;
    background-color: $list-background;
  }
  li {
    flex: 1;
    letter-spacing:1px;
    // border: solid 1px black;
    list-style-type: none;
    float: left;
    cursor: pointer;
    transition: all .3s ease;
    padding-left: 15px;
    background-color: $list-background;
    overflow: hidden;
    li:hover p{
      padding-left: 15px;
    }
  }
  .all {
    // border-right: solid 5px $yellow;
    box-shadow: inset 5px 0 $white;
  }
  .online {
    box-shadow: inset 5px 0 $green;
  }
  .offline {
    box-shadow: inset 5px 0 $red;
  }
  .all:hover {
    @include box-shadow-on-hover($white);
  }
  .online:hover {
    @include box-shadow-on-hover($green);
  }
  .offline:hover {
    @include box-shadow-on-hover($red);
  }
}
.results {
  // border: solid;
  margin-top: 10px;
  background-color: #fff;
  .Online {
    box-shadow: inset -5px 0 $green;
  }
  .Offline, .DNE {
    box-shadow: inset -5px 0 $red;
  }
  .rowy {
    display: flex;
    background-color: $list-background;
    // justify-content: space-around;
    border-left: solid 5px white;
    flex:1;
    margin-bottom: 2px;
    // margin-top:2px;
    img {
     
      margin:auto;
      width: 100px;
      height: 100px;
      border-radius:50%;
    }
    a {
      text-decoration: none;
    }
    .logo {
      display: flex;
      // border:solid;
      height: 200px;
      width: 200px;
      align-self: flex-start;
      overflow: hidden;
      
    }
    .channelDetails {
      // border: solid;
      margin-left: 20px;
      p {
        margin-top: 2px;
        margin-bottom: 2px;
        color: white;
      }
      .channelName {
        margin-top: 30px;
        font-weight: bold;
        font-size: 25px;
      }
    }
  }
}
.footer {
  margin-top: 40px;
  background-color: $list-background;
  // display: flex;
}
.footer p{
/*   border: solid 1px black; */
  margin: auto;
  text-align: center;
   padding-top:15px;
   padding-bottom:15px;
  color: #fff;
/*   margin: auto; */
/*   text-align: center; */
}
.fa-heart {
  color: red;
}

/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
  display: block;
  position: absolute;
  background: $background;
  border-radius: 100%;
  transform: scale(0);
  
  /*animation effect*/
  &.animate {
    -webkit-animation: ripple 0.65s linear;
    animation: ripple 0.65s linear;
  }
  
  @-webkit-keyframes ripple {
    /*scale the element to 250% to safely cover 
    the entire link and fade it out*/
    100% {
      opacity: 0;
      transform: scale(2.5);
    }
  }
  
  @keyframes ripple {
    /*scale the element to 250% to safely cover 
    the entire link and fade it out*/
    100% {
      opacity: 0;
      transform: scale(2.5);
    }
  }
}

              
            
!

JS

              
                function chooseLanguage(streamer) {
switch(streamer) {
          case "en":
            return "English";
            break;
          case "ru":
            return "Russian";
            break;
          case "fr":
            return "French";
            break;
          default:
            return "";
        }
}
$(document).ready(function() {
      var twitchStreamers = [
        "ESL_SC2",
        "ESL_CSGO",
        "OgamingSC2",
        "cretetion",
        "freecodecamp",
        "storbeck",
        "habathcx",
        "RobotCaleb",
        "noobs2ninjas",
        "pink_sparkles",
        "comster404",
        "brunofin",
        "medrybw",
        "monstercat",
        "aces_tv",
        "loserfruit",
        "behkuhtv",
        "fakename",
        "food"
    ];
  var language, views="";
  twitchStreamers.forEach(function(streamer, index) {
    var html = "";
    var streamURL = "https://api.twitch.tv/kraken/streams/" + streamer+"?client_id=1hmrw4n8gpbhzgzhxs1anjw9fapw812&callback=?";
    var channelURL = "https://api.twitch.tv/kraken/channels/" + streamer+"?client_id=1hmrw4n8gpbhzgzhxs1anjw9fapw812&callback=?";
    
    $.getJSON(streamURL, function(streamData) {
      var status;
      console.log("streamurl", streamURL)
      //if(!(streamData.hasOwnProperty(stream)) would also work
      if(streamData.stream === undefined) {
        status = "DNE";
        
        console.log(status, streamer);
        // console.log(streamData);
      }
      else if(streamData.stream ===null) {
        status = "Offline";
        //statusClass="offline";
        console.log(status,streamer);
        // console.log(streamData);
      }
      else {
        status = "Online";
        console.log(status,streamer);
        // console.log(streamData);
      }
      $.getJSON(channelURL, function(channelData) {
         console.log(channelData);
        // execute when channel exists
         
        
        if(status !== "DNE") {
          var displayStatus = status;
          var logo = channelData.logo;
          var channelName = streamer; //channelData.display_name;
          // console.log("online channel");
          // series of statements to initialise channel language
        if(channelData.broadcaster_language !== null){
          language = chooseLanguage(channelData.broadcaster_language);
          // console.log("blang", language);
        }
        else if(channelData.language !== null) {
          language = chooseLanguage(channelData.language); 
          // console.log("lang",language);
        }
        else {
          language = "";
          // console.log(language);
        }
          // series of statements to initialise views
        if(channelData.views !== null) {
          views = channelData.views;
          
        }
        else {
          views = "";
          //console.log(views);
        }
        var url = channelData.url;
        
        var channelStatus = channelData.status !== null ? channelData.status : "";
        
          var followers = channelData.followers;
          // console.log(followers);
          if(status ==="Online") {
            var game = channelData.game;
          }
          else {
            game = "";
          }
          
        }
        
        // execute when status is offline
        else {
          // console.log("offline channel");
          displayStatus = "Does not exist :(";
          logo = "http://dummyimage.com/600x400/fff/000.png&text=404"
          channelName = streamer;
          language = "NA";
          views= "NA";
          followers = "NA";
          url = "#";
          game = "NA";
          channelStatus = "NA";
        }
       // var displayStatus = status ="DNE"? "Channel Doesn't Exist" : status;
        console.log("name", channelName);
        console.log(status+"+");
        console.log(logo);
        console.log(displayStatus);
        console.log(followers);
        console.log(views);
        console.log(game);
        console.log(url);
        console.log(channelStatus);
        console.log(language);
        // console.log(language);
        html += "<div class='rowy " + status + "' id='" + index +"'>";
        // html += "<div class='col-xs-12'>";
        html += "<a target='_blank' href = '"+ url + "'>";
        html += "<div class='logo'>";
        html += "<img src='" + logo + "'/>";
        html += "</div>"; //end of display image div
        html += "<div class='channelDetails'>";
        html += "<p class = 'channelName'>"+"<i class='fa fa-user fa-1.9x' aria-hidden='true'></i> " + channelName +"</p>";
        html += "<p class='channelStatus'>" + channelStatus + "</p>";
        html += "<p class='followers'>" + "<i class='fa fa-users' aria-hidden='true'></i> "+ followers +"</p>";
        html += "<p class='views'>" + "<i class='fa fa-eye' aria-hidden='true'></i> " + views + "</p>";
        html += "<p class='language'>" + "<i class='fa fa-language' aria-hidden='true'></i> "+ "&nbsp" + language + "</p>";
        html += "<p class='game'>" +"<i class='fa fa-gamepad' aria-hidden='true'></i> "+ game + "</p>";
        html += "</a></div></div>";
        console.log(html);
        $(".rowy").addClass("animated fadeIn");
        status === "Online" ? $(".results").prepend(html) : $(".results").append(html);
      });
    });
  });
  // event delegator to pick all/online/offline channels
  document.querySelector("ul").addEventListener("click", function(e){
    console.log(e.target.parentNode.id);
    console.log(e.target.id);
    if(e.target.parentNode.id === "allID" || e.target.id==="allID") {
      
      $(".Online").show();
      $(".Offline").show();
      $(".DNE").show();
      $(".rowy").addClass("animated fadeIn");
    }
    else if(e.target.parentNode.id === "onlineID" || e.target.id==="onlineID") {
      
      $(".Online").show();
      $(".Offline").hide();
      $(".DNE").hide();
      $(".rowy").addClass("animated fadeIn");
    }
    else if(e.target.parentNode.id === "offlineID" || e.target.id==="offlineID") {
      
      $(".Online").hide();
      $(".Offline").show();
      $(".DNE").hide();
      $(".rowy").addClass("animated fadeIn");
    }
    // $(".online").on("click", function() {
    //               $(".Offline").hide();
    //               });
  });
  //jquery code for click effect
  (function(){
  var element, ink, d, x, y;
  $('ul li').click(function(e){
    element = $(this);
    ink = element.find('.ink');
    if(element.find(".ink").length === 0) {
      element.prepend("<span class='ink'></span>");
    }
    //in case of quick double clicks
    //stop the previous animation
    ink.removeClass('animate');

    //set size of .ink
    if( !ink.height() && !ink.width() ){
      //use parent's width or height whichever
      //is larger for the diameter to make a circle
      //which can cover the entire element
      d = Math.max(element.outerWidth(), element.outerHeight());
      ink.css({
        height: d,
        width: d
      });
    }

    //get click coordinates
    //logic = click coordinates relative to page - parent's
    //position relative to page - half of self height/width
    //to make it controllable from the center
    x = e.pageX - element.offset().left - ink.width()/2;
    y = e.pageY - element.offset().top - ink.height()/2;

    //set the position and add class .animate
    ink.css({
      top: y + 'px',
      left: x + 'px'
    }).addClass('animate');
  });
})();
});
              
            
!
999px

Console