Twitch

Tutorials of (Twitch) by Freecodecampuser

<!DOCTYPE html>
<html >
<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/ */
.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/ */
$(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();
    }

  });
 
})

This awesome code ( Twitch ) is write by FreeCodeCampUser, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © FreeCodeCampUser