LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
  • All
  • Offline
  • Online
    CSS
    * {
      box-sizing: border-box;
    }
    
    html {
      overflow-y: scroll;
      font-size: 18px;
    }
    
    body {
      font-family: sans-serif;
      background-color: #CCC;
      background-image: -webkit-repeating-linear-gradient(65deg, transparent, transparent 15px, #DDD 15px, #DDD 30px);
      background-image: repeating-linear-gradient(25deg, transparent, transparent 15px, #DDD 15px, #DDD 30px);
      margin: 1em;
    }
    
    #container {
      width: 35em;
      max-width: 100%;
      margin: 0 auto;
      padding: 0;
      background: rgba(255, 255, 255, .75);
      box-shadow: 2px 2px 30px #333;
      border-radius: 25px;
    }
    
    #tabs {
      list-style-type: none;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #tabs:hover {
     cursor: pointer;
    }
    
    #all {
      background: rgba(0, 70, 200, .4);
      border-radius: 25px 0 0 0;
    }
    
    #offline {
      background: rgba(0, 70, 200, .4);
      border-radius: 0 25px 0 0;
    }
    
    #online {
      background: rgba(0, 70, 200, .4);
      border-left: 3px solid rgba(255,255,255,.5);
      border-right: 3px solid rgba(255,255,255,.5);
    }
    
    #all.active,
    #offline.active,
    #online.active {
      background: rgba(0,70,200,.75);
    }
    
    #tabs li {
      display: table-cell;
      margin: 0;
      text-align: center;
      color: white;
      padding: 1em;
      width: 33.333333%; /* For older browsers */
      width: calc(1/3 * 100%); /* Better! */
    }
    
    #tabs li:nth-child(1) {
      float: left;
    }
    
    #tabs li:nth-child(2) {
      float: right;
    }
    
    #search {
      width: 100%;
      border-radius: 15px;
      border: 1px solid #DDD;
      margin: 1px 0;
    }
    
    #main {
      border-top: 1px solid #DDD;
      margin: 1em 0;
      padding: 0 0 1px 0;
    }
    
    #card {
      margin: 1em;
      padding: 0;
    }
    
    #users {
      list-style-type: none;
      padding: 0;
    }
    
    #users div {
      padding: .1em 1em;
    }
    
    #users div:hover {
      background: rgba(50, 120, 240, .1);
      border-radius: 15px;
    }
    
    #users p {
      display: inline-block;
    }
    
    #users img {
      width: 50px;
      display: inline;
      vertical-align: middle;
      border-radius: 50%;
      margin: 1em 1em 1em 0;
    }
    
    .user {
      position: relative;
    }
    
    li {
      position: relative;
    }
    
    .status {
      position: absolute;
      top: 30%;
      right: 18px;
    }
    
    .topic {
      width: 100%;
      color: #888;
      font-size: 0.9em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
      text-overflow: ellipsis;
      text-overflow: "…";
    }
    
    a {
      color: #de4415;
      text-decoration: none;
    }
    
    input {
      font-family: Octicons;
      padding: 0.35em 0 0.25em 0.5em;
    }
    
    .octicon-check {
      color: rgba(0, 150, 0, .8);
    }
    
    .octicon-x{
      color: #aaa;
    }
    
    .octicon-playback-play {
      color: #de4415;
      margin: 0 0.5em 0 1em;
    }
    JS
    var name, logo, streaming;
    var users = ["denmch", "freecodecamp", "medrybw", "geoffstorbeck",
      "terakilobyte", "habathcx", "robotCaleb", "thomasballinger", "noobs2ninjas", "beohoff"
    ];
    
    // search box: seems logical to force 'all' when searching
    // for a specific user. I'm not looking for the FreeCodeCamp
    // that's online. I'm looking for FreeCodeCamp.
    $('#search').keyup(function() {
      // Get the value of the search box
      searchVal = $(this).val().toLowerCase();
      // Check each user for a match
      $('#users > .user').each(function() {
        text = $('.name', this).text().toLowerCase();
        // If the search text is found show, otherwise hide.
        if (text.indexOf(searchVal) !== -1) {
          $(this).show()
        } else {
          $(this).hide();
        }
      });
      // change bgcolor on tabs accordingly
      $('#all').addClass('active');
      $('#online').removeClass('active');
      $('#offline').removeClass('active');
    });
    
    users.forEach(function(user) {
      var channelURL = '//crossorigin.me/https://api.twitch.tv/kraken/channels/' + user + '?callback=?';
      var streamURL = '//crossorigin.me/https://api.twitch.tv/kraken/streams/' + user + '?callback=?';
    console.log(channelURL);
      $.getJSON(channelURL, function(channel) {    
        $.getJSON(streamURL, function(stream) {
          if (stream.stream === null) {
            streaming = '';
          } else {
            streaming = '';
          }
    
          name = channel.display_name;
    
          if (channel.logo === null) {
            channel.logo = '//crossorigin.me/http://www-cdn.jtvnw.net/images/xarth/404_user_150x150.png';
          }
          logo = '';
    
          $('#users').append('
    '); $('#' + name).append(logo + '' + '' + name + '' + '' + '
    ' + streaming); $('#' + name).append('
    ' + stream.stream.channel.status + '
    '); }); // what happens when tabs are clicked $(function() { // 'all' tab $('#all').click(function() { $('#all').addClass('active'); $('#online').removeClass('active'); $('#offline').removeClass('active'); $(".user").show(); }); }); // 'online' tab $('#online').click(function() { $('#all').removeClass('active'); $('#online').addClass('active'); $('#offline').removeClass('active'); $(".user").each(function() { if ($(this).children(".offline").length === 0) { $(this).show(); } else { $(this).hide(); } }); }); // 'offline' tab $('#offline').click(function() { $('#all').removeClass('active'); $('#online').removeClass('active'); $('#offline').addClass('active'); $(".user").each(function() { if ($(this).children(".offline").length === 0) { $(this).hide(); } else { $(this).show(); } }); }); }); });

    Description

    jQuery and the Twitch API combine to create a web app that shows who in a given user list is online and provides links to their channels.
    Term
    Mon, 11/27/2017 - 21:24

    Related Codes

    Pen ID
    Pen ID
    Pen ID
    Square Adv