JSFiddle - React, Tailwind, and code Playground

by Zeljko Tadic

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="name"></div>
  <div id="bio"></div>
  <div id="stream"></div>
</div>

CSS

body {
    margin-top: 30px;
  } 
  
  .name {
    border: 2px solid black;
    margin: 5px;
    padding: 3px;
  }

JavaScript

function twitchTV(){
    var twitchers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
    var output = "";
    var results = [];
    for (var i = 0; i < twitchers.length; i++){
      var channelName = twitchers[i];
      var apiQueryBio = 'https://wind-bow.glitch.me/twitch-api/users/' + channelName + '/';      
      $.getJSON(apiQueryBio, function(json) {            
      	results.push(json);
        results.sort(function(a,b) {
           return twitchers.indexOf(a.name) - twitchers.indexOf(b.name);
        });
        renderItems(results);
      });     
    }    
    }
  function renderItems(results) {
  $("#name").html('');        
  var output = '';
  for (var i = 0; i < results.length; i++) {
      output += '<div class="name">' + results[i].name + '</div>';
    
  }
    $("#name").html(output);        
  }
  
  twitchTV();