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

              
                <div class="container">
  <div class="row">
    <div class="col-sm-9">
      <h1>Twitch Streamers</h1>
    </div>
    <div class="col-sm-3 streamButtons">
      <span id="all">All<br/></span>
      <span id="online">Online<br/></span>
      <span id="offline">Offline</span>
    </div>
  </div>
  <div class="streamers">
  </div>
  <div class="addStreamers">
    <input type="text" id="addStreamer" placeholder="Your streamer here"/>
    <button class="btn" id="streamerButton">Add streamer</button>
    <span id="warning"></span>
  </div>
</div>
              
            
!

CSS

              
                body {
  background-color: #111;
  color: #ddd;
  margin: 5%;
  font-family: Inconsolata;
}

.container {
  width: 90%;
  padding: 5%;
  background-color: #190061;
  box-shadow: 0px 0px 30px #005;
  border-radius: 3px;
}

#addStreamer {
  border-radius: 10px;
  margin-top: 20px;
  padding: 1%;
  width: 70%;
  color: red;
  text-shadow: 1px 1px 1px #666;
}

#streamerButton {
  font-size: 15px;
  cursor: pointer;
  background-color: #3500D3;
  color: #aaa;
  opacity: 0.6;
  transition-property: color, background-color, opacity, box-shadow;
  transition-duration: 300ms;
}

#streamerButton:hover {
  color: #fff;
  background-color: #5700F5;
  opacity: 1;
  box-shadow: 1px 1px 5px #000;
}

.channelLogos {
  width: 10%;
  border: 2px solid white;
  border-radius: 50%;
  margin: 1%;
  box-shadow: 5px 5px 15px #111;
}

.channelRow {
  margin-top: 1%;
  margin-bottom: 1%;
  padding: 1%;
  background-color: #282828;
  border-radius: 5px;
}

#warning {
  color: red;
}

.channelNames {
  color: #ccf;
  margin-left: 1%;
  background-color: #000;
  padding: 3px;
  border-radius: 3px;
  box-shadow: 3px 3px 15px #000;
}

.channelVideos {
  width: 100%;
  height: 200px;
  display: none;
  opacity: 0;
  border-radius: 10px;
  border: 3px solid #ddd;
  background-position: center;
  background-size: cover;
}

.streaming {
  background-color: #3500D3;
  transition-property: background-color, border-left;
  transition-duration: 500ms;
}

.streaming:hover {
  background-color: #7944F7;
  border-left: 10px solid white;
}

.notStreaming {
  transition-property: background-color, border-left;
  transition-duration: 300ms;
}

.notStreaming:hover {
  background-color: #555;
  border-left: 10px solid black;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  color: white;
  text-decoration: none;
}

a:visited {
  color: white;
}

.channelStreams {
  display: none;
  font-weight: bold;
  color: #f44;
  background-color: #000;
  padding: 3px;
  border-radius: 3px;
  box-shadow: 3px 3px 15px #000;
}

.streamButtons {
  text-align: right;
  font-size: 12px;
  cursor: pointer;
}

#all {
  color: white;
  padding: 0px;
  transition-property: background-color, box-shadow, padding;
  transition-duration: 500ms;
}

#all:hover {
  background-color: #e55;
  box-shadow: 2px 2px 20px #000;
  padding: 3px;
}

#online {
  padding: 2px;
  background-color: #3500D3;
  transition-property: background-color, box-shadow, padding;
  transition-duration: 500ms;
}

#online:hover {
  background-color: #e55;
  box-shadow: 2px 2px 20px #000;
  padding: 4px;
}

#offline {
  padding: 2px;
  background-color: #282828;
  transition-property: background-color, box-shadow, padding;
  transition-duration: 500ms;
}

#offline:hover {
  background-color: #e55;
  box-shadow: 2px 2px 20px #000;
  padding: 4px;
}
              
            
!

JS

              
                $(document).ready(function() {
  //these are the base links for channels and streams
  var twitchChannels = "https://wind-bow.glitch.me/twitch-api/channels/";
  var twitchStreams = "https://wind-bow.glitch.me/twitch-api/streams/";

  //these variables are being declared here so that they are global. they will be used in functions later
  var channel;
  var channelLink;
  var channelLogo;
  var channelName;
  var channelRow;
  var channelStream;
  var notStreaming;
  var stream;
  var streaming;
  var channelVideo;
  var channelBanner;

  //this array is the base list of users when the page first loads. the list is subject to change
  var streamers = [
    "freecodecamp",
    "CodingTutorials360",
    "Slinned",
    "VGBootcamp",
    "ThrowdownTV",
    "TwinGalaxiesLive",
    "iDevelopThings",
    "CaptainKraft",
    "anthonyz_",
    "Xiceman126",
    "BeyondTheSummit",
    "The8BitDrummer"
  ];

  //grabs all the HTML elements that I will be needing to alter
  var addStreamer = $("#addStreamer");
  var all = $("#all");
  var offline = $("#offline");
  var online = $("#online");
  var streamerButton = $("#streamerButton");
  var streamersContainer = $(".streamers");
  var warning = $("#warning");

  //this is called whenever the list of streams needs to be displayed again
  function updateStreamers() {
    //first empties the current streamers
    streamersContainer.html("");

    //loops through all of the streamers in the array
    for (let i = 0; i < streamers.length; i++) {
      // sets up the links for each individual streamer
      channel = twitchChannels + streamers[i] + "?callback=?";
      stream = twitchStreams + streamers[i] + "?callback=?";

      // creates the HTML for each streamer's row. ids are created based on the streamer
      streamersContainer.append(
        "<a href='' id='" +
          streamers[i] +
          "link' target='_blank'><div class='row channelRow' id='" +
          streamers[i] +
          "Row'><div class='col-sm-12'><img src='' id='" +
          streamers[i] +
          "logo' class='channelLogos'/><span class='channelNames' id='" +
          streamers[i] +
          "name'></span><br /><span class='channelStreams' id = '" +
          streamers[i] +
          "stream'></span><div id='" +
          streamers[i] +
          "Video' class='channelVideos'></div></div></div></a>"
      );

      // makes the first getJSON call, retrieving data about the streamer's channel
      $.getJSON(channel, function(data) {
        // accesses the HTML elements we just created based on their id. that way we get each individual one
        channelLogo = $("#" + streamers[i] + "logo");
        channelName = $("#" + streamers[i] + "name");
        channelLink = $("#" + streamers[i] + "link");
        channelRow = $("#" + streamers[i] + "Row");

        //uses the data retrieved to create a url property for the channel's banner
        channelBanner = 'url("' + data.profile_banner + '")';

        //changes the channel's background image to the channel banner, as well as creates the logo image, the channel name, and the link to the channel.
        channelRow.css("background-image", channelBanner);
        channelLogo.attr("src", data.logo);
        channelName.html(data.display_name);
        channelLink.attr("href", data.url);

        //this adds a title to the row, telling the user what game the channel plays
        channelRow.attr("title", data.game);

        //adds some styling for the background image.
        channelRow.css("background-size", "cover");
        channelRow.css("background-position", "center");
      });

      //all of the channel rows should be created. now we want to grab additional information and use it if the channel is streaming
      $.getJSON(stream, function(data) {
        //accesses the HTML elements we want to alter
        channelStream = $("#" + streamers[i] + "stream");
        channelVideo = $("#" + streamers[i] + "Video");

        //this will return true if the channel is currently streaming
        if (data.stream) {
          //we add the "streaming" class to the row to give it relevant css properties
          channelRow.addClass("streaming");

          //we display the name of the stream
          channelStream.html(data.stream.channel.status);
          channelStream.css("display", "block");

          //we give the name of the channel a background color of blue
          channelName.css("background-color", "#3500D3");

          //we grab the url of the preview of the stream and add it as a background image. we also add a title to the preview so that the user can see how many people are watching the stream
          channelVideo.css(
            "background-image",
            'url("' + data.stream.preview.large + '")'
          );
          channelVideo.attr("title", "Viewers: " + data.stream.viewers);

          // we store all of the streaming channels so that we can use it later
          streaming = $(".streaming");
        } else {
          // if the channel is not streaming, then we add the "notStreaming" class to the channel to give it the relevant css properties, and also store those elements in a variable.
          channelRow.addClass("notStreaming");
          notStreaming = $(".notStreaming");
        }
      });
    }
  }

  // calls the function when the user submits the name of the streamer he wants to display
  streamerButton.click(function() {
    //clears the warning's html so it can display something new if it needs to
    warning.html("");

    // we make another getJSON call so that we can see if the channel the user submitted exists.
    $.getJSON(
      "https://wind-bow.glitch.me/twitch-api/channels/" + addStreamer.val(),
      function(data) {
        //if the channel does not exist, then we tell the user inside our warning element.
        if (data.error) {
          warning.append("That twitch account does not exist!");
        } else if (jQuery.inArray(addStreamer.val(), streamers) != -1) {
          // we also want to check to see if we are already displaying that channel
          warning.append("That twitch account is already on the list!");

          //if the channel exists and it's not already on the list, then we add the channel to our list of channels and we update the streamers.
        } else {
          streamers.push(addStreamer.val());
          updateStreamers();
        }
      }
    );
  });

  //ROWS TO HIDE OR DISPLAY
  all.click(function() {
    streaming.show();
    notStreaming.show();
  });

  online.click(function() {
    streaming.show();
    notStreaming.hide();
  });

  offline.click(function() {
    streaming.hide();
    notStreaming.show();
  });

  //updates the streamers once the page has loaded
  updateStreamers();

  // grabs the channel's row, the streaming preview, and the height of the row
  channelVideo = $(".channelVideos");
  channelRow = $(".channelRow");
  var rowHeight = channelRow.height() + 150;

  //animates the row and preview when the user hovers over
  channelRow.mouseenter(function() {
    if ($(this).hasClass("streaming")) {
      $(this).animate(
        {
          height: rowHeight + 200
        },
        1000
      );

      $(this).find(".channelVideos").show();
      $(this).find(".channelVideos").animate(
        {
          opacity: "1"
        },
        500
      );
    }
  });

  //reverses the animation when the user stops hovering.
  channelRow.mouseleave(function() {
    if ($(this).hasClass("streaming")) {
      $(this).find(".channelVideos").animate(
        {
          opacity: "0"
        },
        500
      );
      $(this).find(".channelVideos").show();

      $(this).animate(
        {
          height: rowHeight
        },
        1000
      );
    }
  });
});

              
            
!
999px

Console