A Pen by felix

Thumbnail
This awesome code was written by f1e2l3i4x5, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright f1e2l3i4x5 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  felix</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Twitch Streamers</h1>
<div class="col-md-offset-3 col-md-6 workfield">
  <div class="row">
    <div class="col-xs-2">
      <img id="ESL_SC2" class="icons" src="#">
      </div>  
    <div class="col-xs-4 text">
      <p id="ESL_SC2name"></p>
    </div>
    <div class="col-xs-6 text">
      <a target="_blank" id="ESL_SC2link"><p id="ESL_SC2stream"></p></a>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <img id="OgamingSC2" class="icons" src="#">
      </div>  
    <div class="col-xs-4 text">
      <p id="OgamingSC2name"></p>
    </div>
    <div class="col-xs-6 text">
      <a target="_blank" id="OgamingSC2link"><p id="OgamingSC2stream"></p></a>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <img id="cretetion" class="icons" src="#">
      </div>  
    <div class="col-xs-4 text">
      <p id="cretetionname"></p>
    </div>  
    <div class="col-xs-6 text">
      <a target="_blank" id="cretetionlink"><p id="cretetionstream"></p></a>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <img id="freecodecamp" class="icons" src="#">
      </div>  
    <div class="col-xs-4 text">
      <p id="freecodecampname"></p>
    </div>
    <div class="col-xs-6 text">
      <a target="_blank" id="freecodecamplink"><p id="freecodecampstream"></p></a>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <img id="habathcx" class="icons" src="#">
      </div>  
    <div class="col-xs-4 text">
      <p id="habathcxname"></p>
    </div>
    <div class="col-xs-6 text">
      <a target="_blank" id="habathcxlink"><p id="habathcxstream"></p></a>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <img id="RobotCaleb" class="icons" src="#">
      </div>  
    <div class="col-xs-4 text">
      <p id="RobotCalebname"></p>
    </div>
    <div class="col-xs-6 text">
      <a target="_blank" id="RobotCaleblink"><p id="RobotCalebstream"></p></a>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <img id="noobs2ninjas" class="icons" src="#">
      </div>  
    <div class="col-xs-4 text">
      <p id="noobs2ninjasname"></p>
    </div>
    <div class="col-xs-6 text">
      <a target="_blank" id="noobs2ninjaslink"><p id="noobs2ninjasstream"></p></a>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <img id="StreamerHouse" class="icons" src="#">
      </div>  
    <div class="col-xs-4 text">
      <p id="StreamerHousename"></p>
    </div>
    <div class="col-xs-6 text">
      <a target="_blank" id="StreamerHouselink"><p id="StreamerHousestream"></p></a>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/f1e2l3i4x5/a-pen-by-felix-yoddje */
h1 {
  text-align: center;
  margin-bottom: 30px;
}

.workfield {
  background-color: grey;
  color: white;
  padding: 30px;
}

.icons {
  max-width: 50px;
  height: 50px;
  margin: 10px;
  vertical-align: middle;
}

.text {
  margin-top: 25px;
  word-break: break-all;
}

a {
  color: yellow;
}

/*Downloaded from https://www.codeseek.co/f1e2l3i4x5/a-pen-by-felix-yoddje */
var url = "https://wind-bow.gomix.me/twitch-api";
var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "habathcx", "RobotCaleb", "noobs2ninjas", "StreamerHouse"];
var usersLength = users.length;

    for (var i=0; i<usersLength; i++) {
      (function(i) {
        
        $.getJSON(url+"/users/"+users[i]+"?callback=?", function(data) {
          $('#'+users[i]).attr('src', data.logo);
          $('#'+users[i]+'name').html(data.display_name);
          $('#'+users[i]+'link').attr('href', "https://www.twitch.tv/" + data.name);
        
        $.getJSON(url+"/streams/"+users[i]+"?callback=?", function(dataStream) {
          if (dataStream.stream!==null) {
            $('#'+users[i]+'stream').text(dataStream.stream.game);
          }
          else {
            $('#'+users[i]+'stream').text('offline');
          }
          
        });
        });
      })(i);
    }

Comments