Asynchronous JavaScript: Callbacks, Promises & Promise Chaining

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: 'Segoe UI', sans-serif; background: #060c18; color: #fff; padding: 24px; }
    .card { max-width: 480px; margin: auto; background: #0c1328; border: 1px solid #1e293b; padding: 24px; border-radius: 12px; }
    button { padding: 12px 20px; background: #2563eb; color: #fff; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
    .log-box { margin-top: 16px; padding: 14px; background: #060c18; border: 1px solid #334155; border-radius: 6px; min-height: 120px; font-family: monospace; font-size: 13px; }
    .step { color: #38bdf8; margin: 4px 0; }
    .success { color: #10b981; }
    .error { color: #ef4444; }
  </style>
</head>
<body>
  <div class="card">
    <h3>⚡ Asynchronous Record Verification</h3>
    <button id="runBtn">Start Verification Pipeline</button>
    <div class="log-box" id="logs">Click button to start...</div>
  </div>

  <script>
    const logs = document.getElementById("logs");
    const runBtn = document.getElementById("runBtn");

    function log(msg, cls = "step") {
      const p = document.createElement("div");
      p.className = cls;
      p.textContent = "[" + new Date().toLocaleTimeString() + "] " + msg;
      logs.appendChild(p);
    }

    // Step 1: Simulate Authentication
    function authenticateStudent(id) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          if (id === 2401) resolve({ id: 2401, name: "Rahul Sharma", token: "AUTH_TOKEN_BCA" });
          else reject(new Error("Student ID not found in registry"));
        }, 800);
      });
    }

    // Step 2: Fetch Grades
    function fetchGrades(token) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({ token, bcs011: 85, bcsl013: 92, sgpa: 8.8 });
        }, 1000);
      });
    }

    runBtn.addEventListener("click", () => {
      logs.innerHTML = "";
      runBtn.disabled = true;
      log("Initiating pipeline...");

      authenticateStudent(2401)
        .then((user) => {
          log("✓ Step 1: Authenticated student " + user.name);
          return fetchGrades(user.token);
        })
        .then((grades) => {
          log("✓ Step 2: Grades fetched successfully. SGPA: " + grades.sgpa, "success");
          log("🎉 Pipeline Complete: Eligible for Semester 2 enrollment!", "success");
        })
        .catch((err) => {
          log("✖ Error: " + err.message, "error");
        })
        .finally(() => {
          runBtn.disabled = false;
        });
    });
  </script>
</body>
</html>