A Pen by Mori

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Mori</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="header">
  <span class="title">Twitch Streams</span>
</div>
<div id="streams">
</div>

<script type="text/underscore" id="stream-tmpl">
	<div class="stream <% print(online?'online':'offline') %>">
    <img class="round" src="<%- logo %>" />
    <div class="stream-description">
      <h3>
        <%- name %>
      </h3>
      <p>
        <small><%- bio %></small>
      </p>
    </div>
  </div>
</script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/fmorisan/a-pen-by-mori-PmpqpM */
@import 'https://fonts.googleapis.com/css?family=Exo+2';

body {
  background-color: #222;
  color: #ccc;
  font-family: "Exo 2";
}

#header {
  text-align: center;
  height: 3.5em;
  padding: .5em;
}

.title {
  font-size: 2em;
  font-weight: bold;
}

.round {
  border-radius: 50%;
}

#streams {
  width: 80%;
  margin: auto auto;
}

.stream {
  margin: 3em 0;
  padding: 1em;
  border-radius: .5em;
  text-align: center;
}

.online {
  background-color: rgba(0, 255, 0, 0.3);
}

.offline {
  background-color: rgba(255, 0, 0, 0.3)
}

.stream img {
  width: 7%;
  display: inline;
}

/*Downloaded from https://www.codeseek.co/fmorisan/a-pen-by-mori-PmpqpM */
$(function(){
  // document.onLoad
  
  var BASE_API_URL = 'https://wind-bow.glitch.me/twitch-api/';
  var STREAMS_TO_WATCH = [
    'ESL_SC2',
    'OgamingSC2',
    'storbeck',
    'noobs2ninjas',
    'freecodecamp',
    'ZiggyDLive',
    'skullcan'
  ];
  
  var STREAM_TEMPLATE = _.template($('#stream-tmpl').text())
  
  // get user ids
  $.each(STREAMS_TO_WATCH, function(i, username){
    $.ajax({
      url: BASE_API_URL + 'users/' + username + '/',
      jsonp: "callback",
    }).done(function(response){
      var bio = response.bio;
      var logo = response.logo;
      $.ajax({
        url: BASE_API_URL + 'streams/' + response._id + '/',
        jsonp: "callback",
      }).done(function(response){
        console.log(response);
        var online = response.stream !== null;
        console.log(response)
        if (logo === null){
          // user is not active
          logo = "http://placehold.it/200/200/ff0000";
          bio = "User inactive (or account does not exist)";
        }
        if (bio === null){
          bio = "Description unavailable.";
        }
        var tmpl = STREAM_TEMPLATE({
          logo: logo,
          bio: bio,
          name: username,
          online: online,
        });
        if (online){
          $('#streams').prepend(tmpl);
        } else {
          $('#streams').append(tmpl);
        }
      });
    });
  });
});

Comments