Twitch

In this example below you will see how to do a Twitch with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Twitch</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>

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

  
</head>

<body>

  <div class="jumbotron jHeader"><h1>Twitch Streams</h1>
<div class="row"><div class="button btn-all selected"><p>All</p></div>
  <div class="button btn-online"><p>Online</p></div>
  <div class="button btn-offline"><p>Offline</p></div>
  </div></div>
<div class="container"><!--
  <div class="row notice online">
    <img class="logo" src="" alt="" />
    <div class="description">
      <h2 class="channel"><a href="">Nazzov</a></h2>
      <p class="status title">OfflineOfflineOfflineOfflineOfflineOfflinefeOfflineOff</p>

    </div>
  </div>
  <div class="row notice offline">
    <img class="logo" src="" alt="" />
    <div class="description">
      <h2 class="channel"><a href="">Nazzovvvvv</a></h2>
      <p class="status status"></p>
    </div>
  </div>-->
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/otravujuma/twitch-aBBNgM */
.jHeader{
  text-align:center;
  padding-top: 10px;
}
.jHeader h1{
  font-weight:800;
  color: #6942B0;
}
.button{
  margin-top:10px;
  display:inline-block;
  color: white;
  background-color: #6942B0;
  padding: 10px;
  height: 50px;
  width:100px;
  margin-right:5px;
  cursor: pointer;
}
.button:hover{
  background-color: #462C75;
}
.selected{
  background-color: #462C75;
}
.notice {
  
  color: #6C6C71;
  font-size: 24px;
    padding: 15px;
    background-color: #fafafa;
    border-left: 6px solid #7f7f84;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
       -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
            box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}

.online{
  color: #6942B0;
  border-color:#6942B0;
}

.logo{
  position: relative;
  float:left;
  margin-right:40px;
  width: 60px;
  height: 60px;
  border-radius:50%;
  border: 2px solid;
  
}
.description{
    position:relative;
  
}
.channel{
  display:inline-block;
  position:relative;
  margin-top:15px;
  
}

p.status{
  position:absolute;
  display:inline-block;
  top:15px;
  left:50% ;
  width:47%;
  overflow:hidden;
  
}

/*.offline:after{
  content: 'Offline';
}*/
.title{
  
}
a{
  text-decoration: none;
  color:inherit;
}
a:hover{
  color: #462C75;
}

/*Downloaded from https://www.codeseek.co/otravujuma/twitch-aBBNgM */
$(document).ready(function() {
  
  var streamers = ["ESL_SC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

  for (var i = 0; i < streamers.length; i++) {
    var currentStream = streamers[i];
    
      getData(currentStream);
  }
  
  function getData(currentStream){
    $.getJSON("https://wind-bow.gomix.me/twitch-api/channels/" + currentStream + "?callback=?",
        function(data) {
          //console.log(JSON.stringify(data));
          //console.log("Channels DATA: "+JSON.stringify(data));
          var name = data.display_name;
          var logo = data.logo;
          $.getJSON("https://wind-bow.gomix.me/twitch-api/streams/" + currentStream + "?callback=?",
            function(data) {
              //console.log("streams DATA: "+JSON.stringify(data));
              var clas = [];
              var stat;
              if (data.stream) {
                stat = data.stream.channel.status.length < 40 ? data.stream.channel.status : data.stream.channel.status.slice(0, 40);
                clas.push("online", "title");
              } else {
                stat = "Offline";
                clas.push("offline", "status");
              }

              displayData(clas, name, logo, stat);
            });
        }); 
  }

  function displayData(clas, name, logo, stat) {
      $('.container').append(`<div class="row notice `+ clas[0] +`">
        <img class="logo" src="` + logo + `" alt="` + name + `" >
        <div class="description">
            <h2 class="channel">
                <a href="https://twitch.tv/"` + name + `">` + name +`</a>
            </h2>
            <p class="status "` + clas[1] + `">` + stat + `</p>
        </div>
        </div>`);
  }

  $('.button').click(function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
    var nav = $(this).children("p").text();
    if (nav == "Online") {
      $('.online').show();
      $('.offline').hide();
    } else if (nav == "Offline") {
      $('.online').hide();
      $('.offline').show();
    } else {
      $('.offline').show();
      $('.online').show();
    }

  });
 
})

Comments