diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..d4e3922
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+ Short-Link
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/index.js b/frontend/index.js
new file mode 100644
index 0000000..d3a85fd
--- /dev/null
+++ b/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 = `Shortened URL: ${shortenedUrl}
`;
+ }
+});