siukalov/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    html {
      box-sizing: border-box;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }

    body {
      margin: 0;
      padding: 0;
    }

    .table {
      font-size: 20px;
      border-collapse: collapse;
    }

    .table__cell {
      border: 1px solid rgba(0, 0, 0, 0.4);
      padding: 4px;
      font-weight: normal;
    }

    @keyframes flash {
      0% {
        color: black;
      }

      30% {
        color: rgb(218, 84, 7);
      }

      100% {
        color: black;
      }
    }

    .transition {
      animation: flash 0.6s 1;
    }

  </style>
</head>


<body>
  <h1>Async/Await is non-blocking</h1>
  <table class="table">
    <tr>
      <th class="table__cell"></th>
      <th class="table__cell">Duration(ms)</th>
      <th class="table__cell">Started</th>
      <th class="table__cell">Completed</th>
    </tr>
    <tr>
      <td class="table__cell">Async operation A</td>
      <td id="operation-a-duration" class="table__cell"></td>
      <td id="operation-a-started" class="table__cell"></td>
      <td id="operation-a-completed" class="table__cell"></td>
    </tr>
    <tr>
      <td class="table__cell">Async operation B</td>
      <td id="operation-b-duration" class="table__cell"></td>
      <td id="operation-b-started" class="table__cell"></td>
      <td id="operation-b-completed" class="table__cell"></td>
    </tr>
    <tr>
      <td class="table__cell">Async operation C</td>
      <td id="operation-c-duration" class="table__cell"></td>
      <td id="operation-c-started" class="table__cell"></td>
      <td id="operation-c-completed" class="table__cell"></td>
    </tr>

  </table>
  <script>
    function timer(ms) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, ms);
      });
    }

    function insertTextById(id, text) {
      document.getElementById(id).appendChild(document.createTextNode(text));
      document.getElementById(id).classList.add('transition');
    }

    function getTimestamp() {
      return new Intl.DateTimeFormat('en', {
        hour: 'numeric', minute: 'numeric',
        second: 'numeric', fractionalSecondDigits: 3,
        hour12: false
      }).format(new Date())
    }

    async function opA() {
      const duration = 5000;
      insertTextById('operation-a-duration', duration);

      insertTextById('operation-a-started', getTimestamp());
      await timer(duration);
      insertTextById('operation-a-completed', getTimestamp());
    }

    async function opB() {
      const duration = 1000;
      insertTextById('operation-b-duration', duration);

      insertTextById('operation-b-started', getTimestamp());
      await timer(duration);
      insertTextById('operation-b-completed', getTimestamp());
    }

    async function opC() {
      const duration = 3000;
      insertTextById('operation-c-duration', duration);

      insertTextById('operation-c-started', getTimestamp());
      await timer(duration);
      insertTextById('operation-c-completed', getTimestamp());
    }

    (async () => {
      document.title = 'Processing...'
      await Promise.all([opA(), opB(), opC()]);
      document.title = 'Done!'
    })();

  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<style>
	html {
	box-sizing: border-box;
	}

	*,
	*:before,
	*:after {
	box-sizing: inherit;
	}

	body {
	margin: 0;
	padding: 0;
	}

	.table {
	font-size: 20px;
	border-collapse: collapse;
	}

	.table__cell {
	border: 1px solid rgba(0, 0, 0, 0.4);
	padding: 4px;
	font-weight: normal;
	}

	@keyframes flash {
	0% {
	color: black;
	}

	30% {
	color: rgb(218, 84, 7);
	}

	100% {
	color: black;
	}
	}

	.transition {
	animation: flash 0.6s 1;
	}

	</style>
	</head>


	<body>
	<h1>Async/Await is non-blocking</h1>
	<table class="table">
	<tr>
	<th class="table__cell"></th>
	<th class="table__cell">Duration(ms)</th>
	<th class="table__cell">Started</th>
	<th class="table__cell">Completed</th>
	</tr>
	<tr>
	<td class="table__cell">Async operation A</td>
	<td id="operation-a-duration" class="table__cell"></td>
	<td id="operation-a-started" class="table__cell"></td>
	<td id="operation-a-completed" class="table__cell"></td>
	</tr>
	<tr>
	<td class="table__cell">Async operation B</td>
	<td id="operation-b-duration" class="table__cell"></td>
	<td id="operation-b-started" class="table__cell"></td>
	<td id="operation-b-completed" class="table__cell"></td>
	</tr>
	<tr>
	<td class="table__cell">Async operation C</td>
	<td id="operation-c-duration" class="table__cell"></td>
	<td id="operation-c-started" class="table__cell"></td>
	<td id="operation-c-completed" class="table__cell"></td>
	</tr>

	</table>
	<script>
	function timer(ms) {
	return new Promise((resolve) => {
	setTimeout(() => {
	resolve();
	}, ms);
	});
	}

	function insertTextById(id, text) {
	document.getElementById(id).appendChild(document.createTextNode(text));
	document.getElementById(id).classList.add('transition');
	}

	function getTimestamp() {
	return new Intl.DateTimeFormat('en', {
	hour: 'numeric', minute: 'numeric',
	second: 'numeric', fractionalSecondDigits: 3,
	hour12: false
	}).format(new Date())
	}

	async function opA() {
	const duration = 5000;
	insertTextById('operation-a-duration', duration);

	insertTextById('operation-a-started', getTimestamp());
	await timer(duration);
	insertTextById('operation-a-completed', getTimestamp());
	}

	async function opB() {
	const duration = 1000;
	insertTextById('operation-b-duration', duration);

	insertTextById('operation-b-started', getTimestamp());
	await timer(duration);
	insertTextById('operation-b-completed', getTimestamp());
	}

	async function opC() {
	const duration = 3000;
	insertTextById('operation-c-duration', duration);

	insertTextById('operation-c-started', getTimestamp());
	await timer(duration);
	insertTextById('operation-c-completed', getTimestamp());
	}

	(async () => {
	document.title = 'Processing...'
	await Promise.all([opA(), opB(), opC()]);
	document.title = 'Done!'
	})();

	</script>
	</body>

	</html>