Twitch Streamers

What is a twitch streamers How do you make a twitch streamers? This script and codes were developed by Yas on 11 March 2022, Friday.

How do I make an twitch streamers?
  1. Twitch Streamers Previews
  2. Twitch Streamers HTML Codes
  3. Twitch Streamers CSS Codes
  4. Twitch Streamers JS Codes
Twitch Streamers Previews

Twitch Streamers HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title> Twitch Streamers</title>
  
  
  <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>
  <title>Twitch Streamers</title> 

<body>
  
  <div class="container"> 
    <div class="row">
      <div class="col-md-12">
        <h1 class="text-center heading">twitch.tv streamer</h1> 
      </div>
    </div>
  </div>
  
  <div class="container streamer"> 
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <blockquote class="stream stream1 active">
                 <h3 class="channel-name name1">FreeCodeCamp</h3>
                 <em><a class="link1" href="https://www.twitch.tv/FreeCodeCamp" target="_blank"><h4 class="channel-status text-right grey-text status1">offline</h4></a></em>
                  <div style="clear: both;"></div>
                 <div class="info info1"><p>info</p></div>
        </blockquote>
        <blockquote class="stream stream2">
                 <h3 class="channel-name name2">programming</h3>
                 <em><a class="link2" href="https://www.twitch.tv/programming" target="_blank"><h4 class="channel-status text-right grey-text status2">offline</h4></a></em>
                 <div style="clear: both;"></div>
                 <div class="info info2"><p>info</p></div>
        </blockquote>
        <blockquote class="stream stream3">
                 <h3 class="channel-name name3">hanxgames</h3>
                 <em><a class="link3" href="https://www.twitch.tv/hanxgames" target="_blank"><h4 class="channel-status text-right grey-text status3">offline</h4></a></em>
                 <div style="clear: both;"></div>
                 <div class="info info3"><p>info</p></div>
         </blockquote>
         <blockquote class="stream stream4">
                 <h3 class="channel-name name4">alohadancetv</h3>
                 <em><a class="link4" href="https://www.twitch.tv/alohadancetv" target="_blank"><h4 class="channel-status text-right grey-text status4">offline</h4></a></em>
                 <div style="clear: both;"></div>
                 <div class="info info4"><p>info</p></div>
          </blockquote>
      </div>
    </div>
  </div>
  
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

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

</body>
</html>

Twitch Streamers CSS Codes

body {
  background-color: #f5f5f5;
}

.heading {
  margin-top: 80px;
  color: #404040;
}

.streamer {
  margin-top: 30px;
}

.stream {
  padding: 6px 30px 14px 20px;
  background-color: #fff;
}

.channel-name {
  float: left;
  color: #dc461e;
}

.channel-status {
  float: right;
  margin-top: 24px;
}

.grey-text {
  color: #777;
}


.green-text {
  color: #1edc34;
}

.info  {
  padding: 0  20px;
  margin-left: -20px;
}

.info1 {
  display: none;
}
.info2 {
  display: none;
}
.info3 {
  display: none;
}
.info4 {
  display: none;
}

Twitch Streamers JS Codes

$(document).ready(function() {

    let channels = ['FreeCodeCamp', 'programming', 'hanxgames','alohadancetv'];
    let jsonData = ['data1', 'data2', 'data3','data4'];
    let x;
    
    //loads json into the jsonData array then calls displayData 
    function load(a) {
      $.getJSON('https://api.twitch.tv/kraken/streams/' + channels[a] + '?client_id=9wfkqon0fogl63026fngh37f6al8s6r&callback=?').then(function(data) {
        console.log(a);
        jsonData.splice(a, 1, data);
        console.log(jsonData[a]);
        displayData(a);
      }, function() {
          console.log("failed");                                                   
      });
    }

    //calls load function for each each stream
    function loadStreams() {
        for (var i = 0; i < 4; i++) {
              load(i);
        }
     }


     loadStreams();
      
      //updates the display if the stream is live or is not found 
     function displayData(a) {
         x = a + 1;
         if(jsonData[a]['stream'] === null){
              console.log("offline");
            } else if(jsonData[a]['stream'] != null) {
               $('.status' + x).html("live");
               $('.status' + x).removeClass("grey-text").addClass("green-text");
               $('.info' + x).html("game: " + jsonData[a]['stream']["game"] + "<br> created at: " + jsonData[a]['stream']["created_at"] + "<br> viewers: " + jsonData[a]['stream']["viewers"]);
              $('.info' + x).show();
            } else {
              $('.status' + x).html("Channel does not exist");
            }
     }

});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.