From 140263ce599a6729ed70b8b642be67c982604d3b Mon Sep 17 00:00:00 2001
From: athikha-faiz_infosys <athikha.faiz@infosys.com>
Date: Sat, 18 Oct 2025 13:30:16 +0530
Subject: [PATCH 1/3] HTTP requests Fixes #609

---
 README.md            | 15 ++++++++
 event-loop-demo.html | 88 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 103 insertions(+)
 create mode 100644 event-loop-demo.html
diff --git a/README.md b/README.md
index 924a02f7..58271fc4 100644
--- a/README.md
+++ b/README.md
@@ -425,6 +425,21 @@ The Event Loop is a critical part of JavaScript's concurrency model, ensuring no
 
 **[⬆ Back to Top](#table-of-contents)**
 
+### Event Loop demo (interactive)
+
+There is a small interactive demo included in this repository to visualize microtasks vs macrotasks ordering in the browser.
+
+- File: `event-loop-demo.html`
+- How to open: double-click the file in your file manager or open it in your browser. From the repo root you can also run a simple static server, for example with Python 3:
+
+```powershell
+# from repository root
+python -m http.server 8080; # then open http://localhost:8080/event-loop-demo.html
+```
+
+The demo logs messages to the page and to the browser console showing the expected ordering between synchronous code, microtasks (Promises / async / MutationObserver) and macrotasks (setTimeout).
+
+
 ---
 
 ## 10. setTimeout, setInterval and requestAnimationFrame
diff --git a/event-loop-demo.html b/event-loop-demo.html
new file mode 100644
index 00000000..6298350b
--- /dev/null
+++ b/event-loop-demo.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Event Loop: Microtasks vs Macrotasks Demo</title>
+  <style>
+    body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; padding: 1rem; }
+    #output { margin-top: 1rem; border: 1px solid #ddd; padding: 0.5rem; background: #fafafa; }
+    .log { padding: 0.25rem 0; font-family: monospace; }
+    .note { color: #555; font-size: 0.9rem; }
+  </style>
+</head>
+<body>
+  <h1>Event Loop Demo</h1>
+  <p class="note">This page demonstrates ordering between microtasks (Promises / async) and macrotasks (setTimeout). Open the developer console to see the same logs.</p>
+
+  <button id="run">Run demo</button>
+  <div id="output" aria-live="polite"></div>
+
+  <!-- hidden element used to trigger MutationObserver -->
+  <div id="trigger" style="display:none"></div>
+
+  <script>
+    function log(message) {
+      const out = document.getElementById('output');
+      const d = document.createElement('div');
+      d.className = 'log';
+      d.textContent = message;
+      out.appendChild(d);
+      console.log(message);
+    }
+
+    function clear() {
+      document.getElementById('output').innerHTML = '';
+    }
+
+    function runDemo() {
+      clear();
+      log('script start');
+
+      setTimeout(() => {
+        log('setTimeout 0 (macrotask)');
+      }, 0);
+
+      Promise.resolve()
+        .then(() => {
+          log('promise then 1 (microtask)');
+        })
+        .then(() => {
+          log('promise then 2 (microtask)');
+        });
+
+      (async function asyncExample() {
+        log('async function start');
+        await null; // yields to microtask queue
+        log('async after await (microtask)');
+      })();
+
+      // MutationObserver callbacks are microtasks too
+      const obs = new MutationObserver(() => {
+        log('mutation observer (microtask)');
+        obs.disconnect();
+      });
+      obs.observe(document.getElementById('trigger'), { attributes: true });
+      // trigger mutation
+      document.getElementById('trigger').setAttribute('data-test', Date.now());
+
+      log('script end');
+
+      // Expected ordering in most browsers:
+      // script start
+      // script end
+      // async function start
+      // promise then 1 (microtask)
+      // promise then 2 (microtask)
+      // async after await (microtask)
+      // mutation observer (microtask)
+      // setTimeout 0 (macrotask)
+    }
+
+    document.getElementById('run').addEventListener('click', runDemo);
+
+    // Run automatically on load for convenience
+    window.addEventListener('load', runDemo);
+  </script>
+</body>
+</html>

From eb8b94560cbd121463fee4ddb4826421412a399e Mon Sep 17 00:00:00 2001
From: athikha <athikha.faiz@infosys.com>
Date: Sat, 18 Oct 2025 19:59:54 +0530
Subject: [PATCH 2/3] HTTP requests Fixes #609

---
 event-loop-demo.html | 173 ++++++++++++++++++++++++++++++++++---------
 1 file changed, 140 insertions(+), 33 deletions(-)

diff --git a/event-loop-demo.html b/event-loop-demo.html
index 6298350b..72695b34 100644
--- a/event-loop-demo.html
+++ b/event-loop-demo.html
@@ -5,83 +5,190 @@
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>Event Loop: Microtasks vs Macrotasks Demo</title>
   <style>
-    body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; padding: 1rem; }
-    #output { margin-top: 1rem; border: 1px solid #ddd; padding: 0.5rem; background: #fafafa; }
-    .log { padding: 0.25rem 0; font-family: monospace; }
-    .note { color: #555; font-size: 0.9rem; }
+    body { 
+      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; 
+      padding: 1rem;
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    #output { 
+      margin-top: 1rem; 
+      border: 1px solid #ddd; 
+      padding: 0.5rem; 
+      background: #fafafa;
+      min-height: 200px;
+    }
+    .log { 
+      padding: 0.25rem 0; 
+      font-family: monospace;
+      display: flex;
+      align-items: center;
+    }
+    .note { 
+      color: #555; 
+      font-size: 0.9rem; 
+      margin-bottom: 1rem;
+    }
+    .macrotask { color: #2c5282; }
+    .microtask { color: #805ad5; }
+    .sync { color: #2f855a; }
+    .timestamp {
+      color: #666;
+      font-size: 0.8em;
+      margin-right: 8px;
+    }
+    button {
+      padding: 8px 16px;
+      margin: 4px;
+      font-size: 14px;
+      cursor: pointer;
+    }
+    .controls {
+      margin: 1rem 0;
+      display: flex;
+      gap: 8px;
+    }
   </style>
 </head>
 <body>
-  <h1>Event Loop Demo</h1>
-  <p class="note">This page demonstrates ordering between microtasks (Promises / async) and macrotasks (setTimeout). Open the developer console to see the same logs.</p>
-
-  <button id="run">Run demo</button>
+  <h1>Event Loop: Message Queue and Microtasks Demo</h1>
+  <p class="note">This demo illustrates how the Event Loop processes tasks from the Message Queue (macrotasks) and Microtask Queue. The Message Queue handles setTimeout callbacks and DOM events, while the Microtask Queue processes Promises and async/await operations with higher priority.</p>
+  
+  <div class="controls">
+    <button id="run">Run Basic Demo</button>
+    <button id="runAdvanced">Run Advanced Demo</button>
+    <button id="triggerEvent">Trigger DOM Event</button>
+    <button id="clear">Clear Output</button>
+  </div>
+  
   <div id="output" aria-live="polite"></div>
 
   <!-- hidden element used to trigger MutationObserver -->
   <div id="trigger" style="display:none"></div>
 
   <script>
-    function log(message) {
+    function log(message, type = 'sync') {
       const out = document.getElementById('output');
       const d = document.createElement('div');
-      d.className = 'log';
-      d.textContent = message;
+      d.className = `log ${type}`;
+      
+      // Add timestamp
+      const timestamp = document.createElement('span');
+      timestamp.className = 'timestamp';
+      timestamp.textContent = new Date().toLocaleTimeString([], { hour12: false });
+      
+      const content = document.createElement('span');
+      content.textContent = message;
+      
+      d.appendChild(timestamp);
+      d.appendChild(content);
       out.appendChild(d);
-      console.log(message);
+      console.log(`${timestamp.textContent}: ${message}`);
     }
 
     function clear() {
       document.getElementById('output').innerHTML = '';
     }
 
+    // Basic demo showing core concepts
     function runDemo() {
       clear();
-      log('script start');
+      log('Script Start', 'sync');
 
       setTimeout(() => {
-        log('setTimeout 0 (macrotask)');
+        log('setTimeout 0ms (macrotask)', 'macrotask');
       }, 0);
 
       Promise.resolve()
         .then(() => {
-          log('promise then 1 (microtask)');
+          log('Promise.then 1 (microtask)', 'microtask');
         })
         .then(() => {
-          log('promise then 2 (microtask)');
+          log('Promise.then 2 (microtask)', 'microtask');
         });
 
       (async function asyncExample() {
-        log('async function start');
+        log('Async Function Start', 'sync');
         await null; // yields to microtask queue
-        log('async after await (microtask)');
+        log('After await (microtask)', 'microtask');
       })();
 
-      // MutationObserver callbacks are microtasks too
+      // MutationObserver example (microtask)
       const obs = new MutationObserver(() => {
-        log('mutation observer (microtask)');
+        log('MutationObserver callback (microtask)', 'microtask');
         obs.disconnect();
       });
       obs.observe(document.getElementById('trigger'), { attributes: true });
-      // trigger mutation
       document.getElementById('trigger').setAttribute('data-test', Date.now());
 
-      log('script end');
-
-      // Expected ordering in most browsers:
-      // script start
-      // script end
-      // async function start
-      // promise then 1 (microtask)
-      // promise then 2 (microtask)
-      // async after await (microtask)
-      // mutation observer (microtask)
-      // setTimeout 0 (macrotask)
+      log('Script End', 'sync');
+    }
+
+    // Advanced demo with more complex scenarios
+    function runAdvancedDemo() {
+      clear();
+      log('Advanced Demo Start', 'sync');
+
+      // Multiple macrotasks with different delays
+      setTimeout(() => {
+        log('setTimeout 0ms (macrotask 1)', 'macrotask');
+        
+        // Nested microtask
+        Promise.resolve().then(() => {
+          log('Nested Promise in setTimeout (microtask)', 'microtask');
+        });
+      }, 0);
+
+      setTimeout(() => {
+        log('setTimeout 2000ms (macrotask 2)', 'macrotask');
+      }, 2000);
+
+      // Chain of microtasks
+      Promise.resolve()
+        .then(() => {
+          log('Promise chain 1 (microtask)', 'microtask');
+          return Promise.resolve();
+        })
+        .then(() => {
+          log('Promise chain 2 (microtask)', 'microtask');
+          // Scheduling a macrotask from microtask
+          setTimeout(() => {
+            log('setTimeout from Promise chain (macrotask)', 'macrotask');
+          }, 0);
+        });
+
+      // Async/await example
+      (async function complexAsyncExample() {
+        log('Complex Async Start', 'sync');
+        
+        await Promise.resolve();
+        log('After first await (microtask)', 'microtask');
+        
+        await Promise.resolve();
+        log('After second await (microtask)', 'microtask');
+        
+        setTimeout(() => {
+          log('setTimeout in async function (macrotask)', 'macrotask');
+        }, 1000);
+      })();
+
+      // Direct microtask scheduling
+      queueMicrotask(() => {
+        log('queueMicrotask callback (microtask)', 'microtask');
+      });
+
+      log('Advanced Demo End', 'sync');
     }
 
+    // Event Handlers
     document.getElementById('run').addEventListener('click', runDemo);
+    document.getElementById('runAdvanced').addEventListener('click', runAdvancedDemo);
+    document.getElementById('clear').addEventListener('click', clear);
+    document.getElementById('triggerEvent').addEventListener('click', () => {
+      log('DOM Event Handler (macrotask)', 'macrotask');
+    });
 
-    // Run automatically on load for convenience
+    // Run basic demo on load
     window.addEventListener('load', runDemo);
   </script>
 </body>

From 002a19608dd4ba3f89165fb3cdc2957cfec8c583 Mon Sep 17 00:00:00 2001
From: athikha <athikha.faiz@infosys.com>
Date: Sat, 18 Oct 2025 20:12:02 +0530
Subject: [PATCH 3/3] Add Event Loop Implementation

- Create interactive demo of JavaScript Event Loop
- Implement Message Queue and Microtask Queue handling
- Add visual execution flow with timestamps
- Include DOM event examples
- Demonstrate Promise and async/await behavior

Resolves the implementation of Event Loop demonstration showing:
- Task Queue (Message Queue) operations
- Microtask queue priority
- Event Loop execution order
- Asynchronous operation handling
---
 event-loop-demo.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/event-loop-demo.html b/event-loop-demo.html
index 72695b34..3123f353 100644
--- a/event-loop-demo.html
+++ b/event-loop-demo.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>Event Loop: Microtasks vs Macrotasks Demo</title>
+  <title>Event Loop: Message Queue and Microtasks Demo</title>
   <style>
     body { 
       font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; 
