123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <head>
  <!-- NEED TO USE FONT-AWESOME -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body id="main">
<div class="container-fluid">
  <div class="wrapper">
  <div class="row">
    <div class="col-xs-4">
    </div>
    <div class="col-xs-4">
      <div class="row">
        <div class="col-xs-1">
        </div>
        <div class="col-xs-10">
          <div class="row noPadding">
            
            <div class="col-xs-4 noPadding">
              <button type="button" id="btn1">All</button>
            </div>
            <div class="col-xs-4 noPadding">
              <button type="button" id="btn2">Online</button>
            </div>
            <div class="col-xs-4 noPadding">
              <button type="button" id="btn3">Offline</button>
            </div>
          </div>     
          <div id="searchWrappper">
            <div class="searchClass" id="searchDiv">
              <i class="fa fa-search iconClass" aria-hidden="true"></i>
              <input class="submit_on_enter searchBox" type="text" id="search" name="search" autocomplete="off" placeholder=""> 
            </div>
          </div>    
          <div id="allBox">  
            <div class="colClass">Icon Users Status
            </div>
            <div class="colClass">Icon freeCodeCamp Offlline
            </div>
            <div class="colClass">Icon MedryBW Online
            </div>
            <div class="row colClass"> 
              <a href="https://twitch.tv/freecodecamp" target="_blank">
                <div class="col-xs-2" id="logo">
                  <img class="imageClass" src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50">
                </div>
                <div class="col-xs-8 streamClass">username<br><h6>description</h6>
                </div>
                <div class="col-xs-2" id="status"><i class="checkIconClass fa fa-check" aria-hidden="true"></i>
                </div>
              </a>
            </div>  
          </div>  
          <div id="onlineBox">  
            <div class="colClass">Icon Users Status
            </div>
            <div class="colClass">Icon MedryBW Online
            </div>
          </div>  
          <div id="offlineBox">  
            <div class="colClass">Icon Users Status
            </div>
            <div class="colClass">Icon freeCodeCamp Offlline
            </div>
          </div>            
        </div>  
        <div class="col-xs-1">
        </div>
      </div>
    </div>
    <div class="col-xs-4">
    </div>
  </div>
  </div>  
</div>  
</body>
            
          
!
            
              
body {
  background-color: #FF5733;
  color: black;
  font-size: 12px;
  text-align: center;
  width: 100%; 
}

button {
  border-width: 1px;
  border-style: outset;
  border-color: white;/*Insert a darker version of your button color here*/
  background-color: #D92C0A;
  color: white;
  font-size: 15px;
  /*float: left; /* Removes spacing between buttons */
  margin-bottom: 0em;
  margin-top: 1em;
  padding-left: 0px;
  padding-right: 0px;
  /*text-align: center;*/
  height: 50px;
  width: 100%; 
  /*width: 138px;*/  
}
button:hover {
  color: black;
  background-color: #FF5733;
}

.colClass {
  background-color: white;
  color: #D92C0A;
  font-size: 17px;
  height: 60px;
  text-align: center;
  width: 100%; 
}

.checkIconClass {
  color: green;
}

.exclaimIconClass {
  color: #D92C0A;
}

.iconClass {
    /*margin-left: 63px;
    font-size: 40px;*/
    /*height: 10px;*/
    /*position: absolute;
    vertical-align: middle;
    z-index: 2;
    top: 111%; height: 10em; margin-top: -5em;*/
    position: relative;
    top: 12%;
    right: -10%;
    z-index: 5;
}

h6 {
  text-align: left;
  color: black;
  /*next 3 lines make sure text dont overflow  their container and add '...' at the end */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.imageClass {
  height: 50px;
  width: 50px;
  border-color: black;
  border-width: 0px;
  border-style: solid;
  border-radius: 50%   /* circle */
}

input {
  position: relative;
  /*z-index: 1;*/
}

.noPadding {padding: 0;}

.row {
    margin: 0px 0px;
} /* Used this with the .noPadding class to get my buttons to fill up the containers and my divs to be the same length*/

.searchBox {
  background-color: white;
  border: 1px solid black;
  /*color: #D92C0A;*/
  color: black;
  /*float: left; /* float text input to the left */
  /*flex-grow: 1;*/
  font-size: 18px;
  height: 30px;
  /*image: img.search-icon;*/
  padding: 20px 35px 15px 0px;
  position: relative;
  bottom: 20px;
  top: 10px;
  left: 50px;
  right: 15 px;
  text-align: center;
  width: 65%;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.searchClass {
  align: center;
  background-color: white;
  border-color: 20px solid-black;
  color: black;
  font-size: 14px;
  height: 70px;
  padding-top: 0px;
  text-align: left;
  vertical-align: top;
  width: 100%;
}

.streamClass {
  text-align: left;
}

.wrapper{ 
  /*box-shadow: 0px 0px 12px black;*/
  border-radius: 100%;
  display: block;
  height: 460px;
  margin: auto;
  position: relative;
  top: 1em;
  width: 1280px;
  /*max-width: 50%;*/
  /*max-height: 50%;*/
}

/* Scaling for Mobile */
@media screen and (max-width: 460px){

  .wrapper {
    top: 4px;
    
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -o-transform: scale(0.6);
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    
    left: 50%;
    margin-left: -400px; /*PlayWithThis*/
  }
}

            
          
!
            
              $(document).ready(function() {
 
  //Default/Initial settings
  $("#btn1").css("color", "black");
  $("#btn2").css("color", "white");
  $("#btn3").css("color", "white");
  $("#btn1").css("background-color", "white");
  $("#btn2").css("background-color", "#D92C0A");
  $("#btn3").css("background-color", "#D92C0A");
  $("#allBox").css("display", "inline"); // show
  $("#onlineBox").css("display", "none"); // hide
  $("#offlineBox").css("display", "none"); // show
  
  $(".colClass").remove();  // remove any anchor divs added by makeApiCalls() or HTML layout
  createDivs("all"); // initial api Calls
  
  //Handles the search form/searchBox
  $('.submit_on_enter').keyup(function(event) {
    var searchValue = this.value;
    
    //console.log("this.value = " + searchValue);
    hideDivs(searchValue);
  });
  
  //Handle my buttons styling and selection
  $("#btn1").click(function () {
    $(".colClass").remove();  // remove any anchor divs added by makeApiCalls()
    //$(this).css("border-style", "inset");
    $(this).css("color", "black");
    $("#btn2").css("color", "white");
    $("#btn3").css("color", "white");
    $(this).css("background-color", "white");
    $("#btn2").css("background-color", "#D92C0A");
    $("#btn3").css("background-color", "#D92C0A");
    //$("#btn2").css("border-style", "outset;");
    //$("#btn3").css("border-style", "outset;");
    $("btnValue").val("btn1IsPressed");
    $("#allBox").css("display", "inline"); // display
    $("#onlineBox").css("display", "none"); // hide
    $("#offlineBox").css("display", "none"); // hide
    createDivs();
  });
  $("#btn2").click(function () {
    $(".colClass").remove();  // remove any anchor divs added by makeApiCalls()
    $(this).css("color", "black");
    $("#btn1").css("color", "white");
    $("#btn3").css("color", "white");
    $(this).css("background-color", "white");
    $("#btn1").css("background-color", "#D92C0A");
    $("#btn3").css("background-color", "#D92C0A");
    $("btnValue").val("btn2IsPressed");
    $("#allBox").css("display", "none"); // hide
    $("#onlineBox").css("display", "inline"); // show
    $("#offlineBox").css("display", "none"); // hide
    createDivs();
  });
  $("#btn3").click(function () {
    $(".colClass").remove();  // remove any anchor divs added by makeApiCalls()
    $(this).css("color", "black");
    $("#btn1").css("color", "white");
    $("#btn2").css("color", "white");
    $(this).css("background-color", "white");
    $("#btn1").css("background-color", "#D92C0A");
    $("#btn2").css("background-color", "#D92C0A");
    $("btnValue").val("btn3IsPressed");
    $("#allBox").css("display", "none");  // hide
    $("#onlineBox").css("display", "none");  // hide
    $("#offlineBox").css("display", "inline"); // show
    createDivs();
  });
   
});  


function createDivs() {
  var streamers = ["freecodecamp", "ESL_SC2", "OgamingSC2", "cretetion", "storbeck", "habathcx", "RobotCaleb", "MedryBW", "noobs2ninjas"];
    
  //1 - loop through the streamers array
  for (i = 0; i < streamers.length; i++) {
    //2 - get the api info (api call)
    userName = streamers[i];
    result = makeApiCall(userName); /* DO THIS BECAUSE YOU DON'T WANT TO PUT YOUR Api call IN A LOOP */    
  } // end for loop
} //function createDivs()


function makeApiCall(userName){
  var apiStart = "https://wind-bow.gomix.me/twitch-api/streams/";
  var apiEnd = "?callback=?";
  var api = "";
  var result = {};
  var status = ""; 
  
  var divId ="<div id='"; 
  // userName
  var div1 = "' class='row colClass'><a href='";
  //var div1 = "<div class='row colClass'><a href='";
  var twitchURL = "https://twitch.tv/";
  // userName(streamers array) / result.stream.channel.name
  var div2 = "' target='_blank'><div class='col-xs-2' id='logo'><img class='imageClass' src='";
  var logoURL = ""; // result.stream.channel.logo;
  //var dummyLogoURL = "https://dummyimage.com/50x50/ecf0e7/5c5457.jpg&text=0x3F"; 
  var dummyLogoURL = "https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50";
  var div3 = "'></div><div class='col-xs-8 streamClass'>";
  // userName(streamers array) / result.stream.channel.name
  var div4 = "<br><h6>";
  var streamStatus = "          "; //result.stream.channel.status
  var div5 = "</h6></div><div class='col-xs-2' id='status'><i class='";
  var checkIcon = "checkIconClass fa fa-check";
  var exclaimIcon = "exclaimIconClass fa fa-exclamation";
  var div6 = "' aria-hidden='true'></i></div></a></div>"; 
  var divHTML = "";
  
  api = apiStart + userName + apiEnd;
  //console.log("makeApiCall: Got Here.");
    $.getJSON(api, function(data) {
      console.log("Made the JSON/api call");
      result = data;
      //console.log(JSON.stringify(result, null, 4)); // helps with the layout of the data api returns
      //3 - create div
      divHTML = "";  // start a new div
      divHTML = divId  + userName + div1 + twitchURL + userName + div2;
      
      if (result.stream === null) {
        //console.log("Got Here: NULL");
        status = "offline";
        divHTML = divHTML + dummyLogoURL + div3 + userName + div4 + streamStatus + div5 + exclaimIcon + div6;
        //console.log("divHTML = " + divHTML);
      } else {
        //console.log("Got Here: NOT NULL");
        status = "online";
        divHTML = divHTML + result.stream.channel.logo + div3 + userName + div4 + result.stream.channel.status + div5 + checkIcon + div6;
        //console.log("RESULT.STREAM.CHANNEL.LOGO = " + result.stream.channel.logo);         
        //console.log("RESULT.STREAM.CHANNEL.NAME = " + result.stream.channel.name);
        //console.log("RESULT.STREAM.CHANNEL.STATUS = " + result.stream.channel.status);
      }
      
      //4 - add to appropriate div sections
      //console.log("divHTML = " + divHTML);
      $("#allBox").append(divHTML);
      if (status === "online") {
        $("#onlineBox").append(divHTML);
      }
      if (status === "offline") {
        $("#offlineBox").append(divHTML);
      }
    })
  .done(function() {  
      console.log('getJSON request succeeded!');
      //console.log(JSON.stringify(data, null, 4)); // helps with the layout of the data api returns
    }) 
    .fail(function(jqXHR, textStatus, errorThrown) {
      console.log('getJSON request failed! ' + textStatus);
      //$("#search").val("getJSON request failed! " + textStatus);
    })
    .always(function() {
      console.log('getJSON request ended!');
    });
} // end function makeApiCall

function hideDivs(search) { // functions with the "search" field
  $("#allBox > div").hide(); 
  $("#onlineBox > div").hide();
  $("#offlineBox > div").hide();
  $('#allBox > div[id*="'+search+'"]').show(); // show the ones that match
  $('#onlineBox > div[id*="'+search+'"]').show(); // show the ones that match
  $('#offlineBox > div[id*="'+search+'"]').show(); // show the ones that match
  
  if (search === "") {  // show all divs
    $("#allBox > div").show();
    $("#onlineBox > div").show();
    $("#offlineBox > div").show();
  }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console