W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: Arial, sans-serif}

.container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.box {
  border: 1px solid #ccc;
  padding: 15px;
  width: 220px;
  min-height: 160px;
}

.item {
  background: #f1f1f1;
  margin: 6px 0;
  padding: 8px;
  border-left: 4px solid #2196F3;
}

.output {
  background: #111;
  color: #fff;
  padding: 12px;
  min-height: 80px;
  white-space: pre-line;
}

button {
  margin: 5px 5px 5px 0;
  padding: 8px 12px;
}
</style>
</head>
<body>

<h1>JavaScript Event Loop Visualizer</h1>

<p>Click <b>Next Step</b> to see how JavaScript handles normal code, timers, and Promises.</p>

<button onclick="nextStep()">Next Step</button>
<button onclick="resetDemo()">Reset</button>

<h2>Output</h2>
<div id="output" class="output"></div>

<h2>Explanation</h2>
<p id="explain">Click Next Step to start.</p>

<pre>
console.log("A");

setTimeout(function() {
  console.log("B");
}, 0);

Promise.resolve().then(function() {
  console.log("C");
});

console.log("D");
</pre>

<div class="box">
    <h3>Call Stack</h3>
    <div id="stack"></div>
  </div>

<div class="box">
    <h3>Browser APIs</h3>
    <div id="apis"></div>
  </div>

<div class="box">
    <h3>Task Queue</h3>
    <div id="tasks"></div>
  </div>

<div class="box">
    <h3>Microtask Queue</h3>
    <div id="microtasks"></div>
  </div>

</div>

let index = 0;

function showItems(id, items) {
  let html = "";

for (let item of items) {
    html += '<div class="item">' + item + '</div>';
  }

document.getElementById(id).innerHTML = html;
}

function showStep() {
  let step = steps[index];

showItems("stack", step.stack);
  showItems("apis", step.apis);
  showItems("tasks", step.tasks);
  showItems("microtasks", step.microtasks);

document.getElementById("output").innerText = step.output;
  document.getElementById("explain").innerHTML = step.explain;
}

function nextStep() {
  showStep();

if (index < steps.length - 1) {
    index++;
  }
}

function resetDemo() {
  index = 0;
  showStep();
}

showStep();
</script>

</body>
</html>