Item: A Pen by felix
Rating: 3.4
Author: f1e2l3i4x5

0 Downloads
2 Views
Tweet
Download Now View Demo

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

More from f1e2l3i4x5

A Pen by felix

Technologies

Comments

More from f1e2l3i4x5

A Pen by felix

FCC 283 Record Collection

JS Calc

No repeats please 2

You Might Also Like

JavaScript Calculator

Nephila

Website #2

Siema - add arrows navigation to prototype

Game Gard (Gamer Space)

radius scatter

safety.com

toba