Add DNS lookup tool and tests

public/app.js

@@ -1,5 +1,32 @@
-// Get references to the page elements we need to update.
-const form = document.getElementById("uptime-form");
+// ---------------------------------------------------------
+// Tool tab navigation
+// ---------------------------------------------------------
+
+const toolTabs = document.querySelectorAll(".tool-tab");
+const toolPanels = document.querySelectorAll(".tool-panel");
+
+toolTabs.forEach((tab) => {
+  tab.addEventListener("click", () => {
+    const selectedToolId = tab.dataset.tool;
+
+    // Update the active tab.
+    toolTabs.forEach((currentTab) => {
+      currentTab.classList.toggle("active", currentTab === tab);
+    });
+
+    // Show only the selected tool panel.
+    toolPanels.forEach((panel) => {
+      panel.hidden = panel.id !== selectedToolId;
+    });
+  });
+});
+
+
+// ---------------------------------------------------------
+// Website Status Checker
+// ---------------------------------------------------------
+
+const uptimeForm = document.getElementById("uptime-form");
 const urlInput = document.getElementById("url-input");
 const checkButton = document.getElementById("check-button");
 const statusMessage = document.getElementById("status-message");
@@ -12,14 +39,11 @@ 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.
+uptimeForm.addEventListener("submit", async (event) => {
   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;
@@ -37,17 +61,14 @@ form.addEventListener("submit", async (event) => {
 
     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";
 
@@ -62,15 +83,119 @@ form.addEventListener("submit", async (event) => {
     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";
   }
-});
+});
+
+
+// ---------------------------------------------------------
+// DNS Lookup
+// ---------------------------------------------------------
+
+const dnsForm = document.getElementById("dns-form");
+const hostnameInput = document.getElementById("hostname-input");
+const dnsButton = document.getElementById("dns-button");
+const dnsMessage = document.getElementById("dns-message");
+const dnsResultPanel = document.getElementById("dns-result-panel");
+const dnsHostname = document.getElementById("dns-hostname");
+const dnsRecords = document.getElementById("dns-records");
+const dnsCheckedAt = document.getElementById("dns-checked-at");
+
+// Convert one DNS record into readable text.
+function formatDnsRecord(recordType, record) {
+  if (recordType === "MX" && typeof record === "object") {
+    return `${record.exchange} (priority ${record.priority})`;
+  }
+
+  return String(record);
+}
+
+// Build one visible record group.
+function createDnsRecordGroup(recordType, records) {
+  const group = document.createElement("section");
+  group.className = "dns-record-group";
+
+  const heading = document.createElement("h4");
+  heading.textContent = recordType;
+  group.appendChild(heading);
+
+  if (!Array.isArray(records) || records.length === 0) {
+    const emptyMessage = document.createElement("p");
+    emptyMessage.className = "empty-record";
+    emptyMessage.textContent = "No records found.";
+    group.appendChild(emptyMessage);
+
+    return group;
+  }
+
+  const list = document.createElement("ul");
+  list.className = "dns-record-list";
+
+  records.forEach((record) => {
+    const item = document.createElement("li");
+    item.textContent = formatDnsRecord(recordType, record);
+    list.appendChild(item);
+  });
+
+  group.appendChild(list);
+
+  return group;
+}
+
+dnsForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+
+  const hostname = hostnameInput.value.trim();
+
+  dnsMessage.textContent = "Looking up DNS records...";
+  dnsMessage.className = "status-message";
+  dnsResultPanel.hidden = true;
+  dnsButton.disabled = true;
+  dnsButton.textContent = "Looking Up...";
+
+  try {
+    const response = await fetch("/api/dns", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ hostname }),
+    });
+
+    const result = await response.json();
+
+    if (!response.ok) {
+      throw new Error(result.error || "The DNS lookup failed.");
+    }
+
+    dnsHostname.textContent = result.hostname;
+    dnsRecords.replaceChildren();
+
+    const recordOrder = ["A", "AAAA", "CNAME", "MX", "TXT", "NS"];
+
+    recordOrder.forEach((recordType) => {
+      const group = createDnsRecordGroup(
+        recordType,
+        result.records[recordType]
+      );
+
+      dnsRecords.appendChild(group);
+    });
+
+    dnsCheckedAt.textContent =
+      `Checked ${new Date(result.checkedAt).toLocaleString()}`;
+
+    dnsMessage.textContent = "DNS lookup completed.";
+    dnsResultPanel.hidden = false;
+  } catch (error) {
+    dnsMessage.textContent = error.message;
+    dnsMessage.className = "status-message error";
+  } finally {
+    dnsButton.disabled = false;
+    dnsButton.textContent = "Look Up DNS";
+  }
+});