thirdreplicator/.babelrc

## .babelrc
more .babelrc
{
  "presets": [ "@babel/preset-env" ]
}

## app.js
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() * 1000)
  );
const services = returnValues.map(createService);

const promises = services.map((service, i) => {
  return service().then(value => {
    const status_id = 'status_' + i
    const status_el = document.getElementById(status_id)
    status_el.innerHTML = 'Complete'

    const value_id = 'value_' + i
    const value_el = document.getElementById(value_id)
    value_el.innerHTML = value

    return (new Date).getTime()
  })
});

Promise.all(promises)
  .then(completion_times => completion_times
      .map((t,i) => ({ id: i, time: t }))
      .sort((o1, o2) => o1.time - o2.time)
  )
  .then(sorted => {
    sorted.forEach((obj, rank) => {
      const dom_id = 'rank_' + obj.id
      const el = document.getElementById(dom_id)
      el.innerHTML = rank + 1
    })
  })

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>ZeroCater Frontend Engineering Screener Test</title>
    <script type="text/javascript" src="app.js"></script>
  </head>
  <body>

    <table>
      <thead>
        <tr>
          <td>Status</td>
          <td>Value</td>
          <td>Rank</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td id='status_0'>Idle</td>
          <td id='value_0'></td>
          <td id='rank_0'></td>
        </tr>
        <tr>
          <td id='status_1'>Idle</td>
          <td id='value_1'></td>
          <td id='rank_1'></td>
        </tr>
        <tr>
          <td id='status_2'>Idle</td>
          <td id='value_2'></td>
          <td id='rank_2'></td>
        </tr>
        <tr>
          <td id='status_3'>Idle</td>
          <td id='value_3'></td>
          <td id='rank_3'></td>
        </tr>
        <tr>
          <td id='status_4'>Idle</td>
          <td id='value_4'></td>
          <td id='rank_4'></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
	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() * 1000)
	);
	const services = returnValues.map(createService);

	const promises = services.map((service, i) => {
	return service().then(value => {
	const status_id = 'status_' + i
	const status_el = document.getElementById(status_id)
	status_el.innerHTML = 'Complete'

	const value_id = 'value_' + i
	const value_el = document.getElementById(value_id)
	value_el.innerHTML = value

	return (new Date).getTime()
	})
	});

	Promise.all(promises)
	.then(completion_times => completion_times
	.map((t,i) => ({ id: i, time: t }))
	.sort((o1, o2) => o1.time - o2.time)
	)
	.then(sorted => {
	sorted.forEach((obj, rank) => {
	const dom_id = 'rank_' + obj.id
	const el = document.getElementById(dom_id)
	el.innerHTML = rank + 1
	})
	})
	<!DOCTYPE html>
	<html>
	<head>
	<title>ZeroCater Frontend Engineering Screener Test</title>
	<script type="text/javascript" src="app.js"></script>
	</head>
	<body>

	<table>
	<thead>
	<tr>
	<td>Status</td>
	<td>Value</td>
	<td>Rank</td>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td id='status_0'>Idle</td>
	<td id='value_0'></td>
	<td id='rank_0'></td>
	</tr>
	<tr>
	<td id='status_1'>Idle</td>
	<td id='value_1'></td>
	<td id='rank_1'></td>
	</tr>
	<tr>
	<td id='status_2'>Idle</td>
	<td id='value_2'></td>
	<td id='rank_2'></td>
	</tr>
	<tr>
	<td id='status_3'>Idle</td>
	<td id='value_3'></td>
	<td id='rank_3'></td>
	</tr>
	<tr>
	<td id='status_4'>Idle</td>
	<td id='value_4'></td>
	<td id='rank_4'></td>
	</tr>
	</tbody>
	</table>
	</body>
	</html>