WRKrWN

index.html

<div id="container">
  <h1>TWITCH STREAMERS</h1>
<ul class="parent" id="parent">
</ul>
</div>

script.js

userNames = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

baseUrl = "https://wind-bow.gomix.me/twitch-api/users/";
//Sample url: "https://wind-bow.gomix.me/twitch-api/users/noobs2ninjas?"
var url;
for (var i=0;i<userNames.length;i++) {
  url = baseUrl + userNames[i] + "?";
  $.getJSON(url, processData);
}


function processData(data) {
  console.log(data);
  var baseLink = "https://www.twitch.tv/";
  var name = data["display_name"];
  var logo = data["logo"];
  var link = baseLink + data["name"];
  //var status = 
  
  var parent = document.getElementById("parent");
  //Create row
  var item = document.createElement("li");
  item.className = "item";
  //Create elements for rows
  //var pLogo = document.createElement("p");
   //pLogo.className = "logo";
  var domLogo = document.createElement("img");
  domLogo.alt = "Logo";
  domLogo.src = logo;
  //pLogo.append(domLogo);
 
  var pName = document.createElement("p");
  var domName = document.createElement("a");
  domName.text = name;
  domName.href = link;
  pName.className = "name";
  pName.append(domName);
  
  //Add elements
  item.append(domLogo);
  item.append(pName);
  
  
  var statusUrl = "https://wind-bow.gomix.me/twitch-api/streams/"+data["name"];
  console.log(statusUrl);
  var status = "Online";
  $.getJSON(statusUrl, function(data) {
    if (data["stream"] == null)
      status = "Offline";
    var domStatus = document.createElement("p");
  domStatus.textContent = status;
  domStatus.className = "status";
   item.append(domStatus); 
    //Appending to parent
  parent.append(item);
  });
  
  
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.css

.container {
  display: flex;
}
h1 {
  background: deepSkyBlue;
  color: white;
  line-height: 50px;
  padding: 10px;
}
.parent {
  border: 5px solid lightcoral;
  margin: 0px;
  padding: 0px;/*remove left space for li elements*/
  font-style: italic;
  
  display: flex;
  flex-direction: column;
}
.item {
  background: deepSkyBlue;
  margin: 5px;
  color: white;
  text-align: center;
  list-style-type: none;
  line-height: 50px;
  /*font-weight: bold;*/
  display: flex;
}
a {
  text-decoration: none;
  color: white;
}
/*p {
  font-style: italic;
}*/
img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: auto;
}
.logo {
  width: 20%
}
.name {
  width: 60%
}
.status {
  width: 20%
}

wrkrwn.markdown

WRKrWN

A Pen by AJ on CodePen.

License.