Twitch.TV

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

Thumbnail
This awesome code was written by KiuShin, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright KiuShin ©
  • HTML
  • CSS
  • JavaScript
    <h1>TWITCH APP</h1>
<input class="form-control" id = "searchUser">search</input>
</div>
<div class = "wrapper">
    <div id="users">
      <h2>USERS</h2>
      </div>
</div>

/*Downloaded from https://www.codeseek.co/KiuShin/twitchtv-BxLVLz */
    body html {
  height: 100%;
    width: 100%;
}

* {
    box-sizing: border-box;
}

h1{
  background-color: purple;
  text-align: center;
}

h2{
  text-align: center;
}

ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
    
}

li {
  text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 2px solid white;
}

.wrapper{
  border: 1px solid black;
  margin:0 auto;
  max-width: 1000px;
  max-height:700px;
  overflow:auto;
}

#users{
  border:1px solid blue;
  float:left;
  background: rgb(89, 65, 244); 
  display:inline-block;
  width:25%;
  height:;
}




/*Downloaded from https://www.codeseek.co/KiuShin/twitchtv-BxLVLz */
    // GLOBAL SCOPES
// jQuery
$(document).ready(function() {
  let streams = [
    "ESL_SC2",
    "OgamingSC2",
    "riotgames",
    "freecodecamp",
    "storbeck",
    "habathcx",
    "RobotCaleb",
    "noobs2ninjas"
  ];
  // Itterates through array and passes them threw url
  
  for (var i = 0; i < streams.length; i++);
let url = "https://wind-bow.glitch.me/twitch-api/channels/" +streams[i];
  
  console.log(url);
  let searchUser = $("#searchUser").val();

  // get api and access data
  $.ajax({
    type: "GET",
    url: url,
    dataType: "json",
    success: function(data) {
      // call user data and decide if its online or offline

      // create li from the array of users
      var ul = document.createElement("ul");
      document.getElementById("users").appendChild(ul);

      streams.forEach(function(streams) {
        var li = document.createElement("li");
        ul.appendChild(li);
        if (data.stream === null) {
          // return data
          li.innerHTML += streams + "offline";
          // console.log(data);
        } else {
          li.innerHTML += streams + "online";
        }
      });
    }
  });

  // create UL of streamers from Array
});
// populate user field

// show who is online

// populate display field

// create search function


Comments