Merge pull request #295 from SiddhiT28/url-shortener

[feature] URL Shortener
Sulagna-Dutta-Roy · May 20, 2024 · 94faff3 · 94faff3
2 parents b9f2311 + 38e99aa
commit 94faff3
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 0 deletions.
diff --git a/URL Shortener/index.html b/URL Shortener/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>URL Shortener</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="flex items-center justify-center h-screen bg-gray-100">
+    <div class="bg-white p-8 rounded shadow-md text-center w-80">
+      <h1 class="text-2xl font-bold mb-4">URL Shortener</h1>
+      <input
+        type="text"
+        id="url-input"
+        class="w-full p-2 mb-4 border border-gray-300 rounded"
+        placeholder="Enter URL"
+      />
+      <button
+        id="shorten-btn"
+        class="w-full bg-blue-500 text-white py-2 rounded mb-4"
+      >
+        Shorten URL
+      </button>
+      <div id="result" class="hidden">
+        <p id="short-url" class="mb-4"></p>
+        <button
+          id="copy-btn"
+          class="w-full bg-green-500 text-white py-2 rounded mb-2"
+        >
+          Copy
+        </button>
+        <button
+          id="share-btn"
+          class="w-full bg-teal-500 text-white py-2 rounded"
+        >
+          Share
+        </button>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/URL Shortener/script.js b/URL Shortener/script.js
@@ -0,0 +1,64 @@
+document.getElementById("shorten-btn").addEventListener("click", async () => {
+  const urlInput = document.getElementById("url-input").value.trim();
+  if (urlInput) {
+    const apiUrl = "https://spoo-me-url-shortener.p.rapidapi.com/";
+    const options = {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+        Accept: "application/json",
+        "X-RapidAPI-Key": "a9691f48eemsh89135388428c926p181a59jsn952d884f92e7",
+        "X-RapidAPI-Host": "spoo-me-url-shortener.p.rapidapi.com",
+      },
+      body: new URLSearchParams({
+        url: urlInput,
+      }),
+    };
+
+    try {
+      const response = await fetch(apiUrl, options);
+      const result = await response.json();
+      console.log("API response:", result); // Log the response for debugging
+
+      if (result && result.short_url) {
+        const shortUrl = result.short_url;
+        document.getElementById("short-url").textContent = shortUrl;
+        document.getElementById("result").classList.remove("hidden");
+      } else {
+        alert("Error shortening URL: " + (result.message || "Unknown error"));
+      }
+    } catch (error) {
+      console.error("Error:", error);
+      alert("Error shortening URL: " + error.message);
+    }
+  } else {
+    alert("Please enter a valid URL.");
+  }
+});
+
+document.getElementById("copy-btn").addEventListener("click", () => {
+  const shortUrl = document.getElementById("short-url").textContent;
+  navigator.clipboard
+    .writeText(shortUrl)
+    .then(() => {
+      alert("URL copied to clipboard!");
+    })
+    .catch((err) => {
+      console.error("Could not copy text: ", err);
+      alert("Failed to copy URL.");
+    });
+});
+
+document.getElementById("share-btn").addEventListener("click", () => {
+  const shortUrl = document.getElementById("short-url").textContent;
+  if (navigator.share) {
+    navigator
+      .share({
+        title: "Check out this URL",
+        url: shortUrl,
+      })
+      .catch((error) => console.error("Error sharing:", error));
+  } else {
+    alert("Sharing not supported on this browser");
+  }
+});