frontend draft

frontend/index.js

@@ -0,0 +1,34 @@
+document.getElementById("urlInput").addEventListener("input", function() {
+    const urlInput = document.getElementById("urlInput");
+    const shortenButton = document.getElementById("shortenButton");
+
+    const urlPattern = /^(https?:\/\/)?([\w\d-]+\.)+[a-z]{2,6}(\/[\w\d-]*)*\/?$/i;
+    const isValid = urlPattern.test(urlInput.value);
+
+    if (isValid) {
+        urlInput.style.borderColor = "green";
+        shortenButton.disabled = false;
+    } else {
+        urlInput.style.borderColor = "red";
+        shortenButton.disabled = true;
+    }
+});
+
+document.getElementById("shortenButton").addEventListener("click", async function() {
+    const urlInput = document.getElementById("urlInput").value;
+    const outputContainer = document.getElementById("output-container");
+
+    if (urlInput) {
+        // const shortenedUrl = urlInput + "-short"; // only for testing
+
+        const shortenedUrl = await fetch("0.0.0.0:8080/", {
+            method: "POST",
+            headers: {
+                "Content-Type": "text/plain",
+            },
+            body: urlInput,
+        });
+
+        outputContainer.innerHTML = `<p>Shortened URL: <a href="${shortenedUrl}" target="_blank">${shortenedUrl}</a></p>`;
+    }
+});