app.js

// begin screener code
const returnValues = [
  "Hakuna",
  "Matata",
  "It means",
  "No worries",
  "For the rest of your days"
].sort(() => (Math.random() > 0.5 ? 1 : -1));
const createService = (retVal, index) => () =>
  new Promise(resolve =>
    setTimeout(() => {
      console.log(`${index}. ${retVal}`);
      resolve(retVal);
    }, Math.random() * 10000)
  );
const services = returnValues.map(createService);
// end screener code

document.addEventListener('DOMContentLoaded', function(){

  var ul=document.createElement("ul");

  document.getElementsByTagName("body")[0].appendChild(ul);
  var lis=[];
  for(let i=0;i<returnValues.length;i++){
    var li=document.createElement("li");
    li.textContent=""+i+": Not Started";
    li.extvar=new Date(8640000000000000);
    li.initind=i;
    lis.push(li);
    ul.appendChild(li);
  }

  function updateList(index, text){

    for(let j=0;j<lis.length;j++){
      if(lis[j].initind === index){
        lis[j].extvar=new Date();
        lis[j].textContent=""+lis[j].initind+": Resolved Value="+text; 
      }
    }
    var new_ul=document.createElement("ul");
    lis.sort(function(a, b){
      return a.extvar-b.extvar;
    });
    for(var i = 0; i < lis.length; i++){
      new_ul.appendChild(lis[i]);
    }
    ul.parentNode.replaceChild(new_ul, ul); 
    ul=new_ul;
  }

  for(let i=0;i<services.length;i++){
    services[i]().then(updateList.bind(null,i)); 
    for(let j=0;j<lis.length;j++){
      if(lis[j].initind==i){
        lis[j].textContent=""+lis[j].initind+": Pending"; 
      }
    }

  }
});