Initial ByteGeist Toolbox uptime checker

public/app.js

@@ -0,0 +1,76 @@
+// Get references to the page elements we need to update.
+const form = document.getElementById("uptime-form");
+const urlInput = document.getElementById("url-input");
+const checkButton = document.getElementById("check-button");
+const statusMessage = document.getElementById("status-message");
+const resultPanel = document.getElementById("result-panel");
+
+const onlineBadge = document.getElementById("online-badge");
+const statusCode = document.getElementById("status-code");
+const responseTime = document.getElementById("response-time");
+const redirectCount = document.getElementById("redirect-count");
+const checkedAt = document.getElementById("checked-at");
+const finalUrl = document.getElementById("final-url");
+
+// Listen for the form submission.
+form.addEventListener("submit", async (event) => {
+  // Prevent the browser from reloading the page.
+  event.preventDefault();
+
+  const url = urlInput.value.trim();
+
+  // Reset the interface before starting a new check.
+  statusMessage.textContent = "Checking website...";
+  statusMessage.className = "status-message";
+  resultPanel.hidden = true;
+  checkButton.disabled = true;
+  checkButton.textContent = "Checking...";
+
+  try {
+    const response = await fetch("/api/uptime", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ url }),
+    });
+
+    const result = await response.json();
+
+    // Handle API-level errors.
+    if (!response.ok) {
+      throw new Error(result.error || "The request failed.");
+    }
+
+    // Handle unreachable or blocked destinations.
+    if (!result.online) {
+      throw new Error(result.error || "The website could not be reached.");
+    }
+
+    // Fill in the successful result.
+    onlineBadge.textContent = "Online";
+    onlineBadge.className = "status-badge online";
+
+    statusCode.textContent = result.statusCode;
+    responseTime.textContent = `${result.responseTimeMs} ms`;
+    redirectCount.textContent = result.redirectCount;
+    checkedAt.textContent = new Date(result.checkedAt).toLocaleString();
+
+    finalUrl.textContent = result.finalUrl;
+    finalUrl.href = result.finalUrl;
+
+    statusMessage.textContent = "Website check completed.";
+    resultPanel.hidden = false;
+  } catch (error) {
+    // Show a safe, readable message to the user.
+    statusMessage.textContent = error.message;
+    statusMessage.className = "status-message error";
+
+    onlineBadge.textContent = "Offline";
+    onlineBadge.className = "status-badge offline";
+  } finally {
+    // Restore the button whether the request succeeded or failed.
+    checkButton.disabled = false;
+    checkButton.textContent = "Check Website";
+  }
+});