documenting

aviiciii · Mar 18, 2023 · 98a5793 · 98a5793
1 parent 6278777
commit 98a5793
Show file tree

Hide file tree

Showing 6 changed files with 221 additions and 188 deletions.
diff --git a/favicon.png b/favicon.png
diff --git a/index.html b/index.html
@@ -1,57 +1,57 @@
-<html>
-	<head>
-		<link />
-	</head>
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Shorten! from aviiciii</title>
+        <link rel="stylesheet" href="styles.css" />
+        <link rel="icon" href="favicon.png" />
+    </head>
+
 	<body>
-		<h1 class="message">Shorten your link!</h1>
-		<div>
-			<input name="text" type="url" value id="linkinput" placeholder="Paste a URL to shorten" /> <br> <br>
-			<input name="path" type="text" value id="pathinput" placeholder="Custom path (optional)" /> <br> <br>
-            <input type="submit" id="myinput" value="Shorten" />
+
+        <!-- form -->
+		<div class="login-box">
+			<form>
+
+                <!-- long url -->
+				<div class="user-box">
+					<input type="text" name="text" value id="linkinput" required="" />
+					<label>Url</label>
+				</div>
+
+                <!-- path -->
+				<div class="user-box">
+					<input type="text" name="path" value id="pathinput" required="" />
+					<label>Slug</label>
+				</div>
+
+                <!-- button -->
+				<a href="#" id="myinput" value="Shorten">
+					<span></span>
+					<span></span>
+					<span></span>
+					<span></span>
+					Shorten
+				</a>
+			</form>
+
+            <br>
+
+            <!-- shortened url box -->
+            <div class="msg row">
+                <div class="column left">
+                    <p id="message">link.laavesh.ml/ </p>
+                </div>
+                <div class="column right">
+                    <button name="copy" id="copy"><img  src="copy.png" width="30px" alt="copy"  /></button>
+                </div>
+            </div>
 		</div>
-		<p id="message"></p>
-
-
-
-
-
-		<script>    
-			document.getElementById("myinput").onclick = function () {
-				var link = document.getElementById("linkinput").value;
-				var data = {
-					domain: "link.laavesh.ml",
-					originalURL: link,
-					allowDuplicates: false,
-				};
-                // add custom path if it exists
-                if (document.getElementById("pathinput").value != "") {
-                    data.path = document.getElementById("pathinput").value;
-                }
-				fetch("https://api.short.cm/links/public", {
-					method: "post",
-					headers: {
-						accept: "application/json",
-						"Content-Type": "application/json",
-						authorization: "pk_ynFkEXQHXdWrijOF",
-					},
-					body: JSON.stringify(data),
-				})
-					.then(function (response) {
-                        return response.json();
-					})
-					.then(function (data) {
-                        if (data.error) {
-                            throw data.error;
-                        }
-						document.getElementById("message").innerHTML = "Your short link is " + data.shortURL;
-					})
-                    .catch(function (error) {
-                        console.log(error);
-                        document.getElementById("message").innerHTML = error;
-                    });
-				document.getElementById("linkinput").value = "";
-                document.getElementById("pathinput").value = "";
-			};
-		</script>
+
+        <!-- link script -->
+        <script src="script.js"></script>
+
 	</body>
 </html>
diff --git a/new.html b/new.html
diff --git a/old.html b/old.html
@@ -0,0 +1,57 @@
+<html>
+	<head>
+		<link />
+	</head>
+	<body>
+		<h1 class="message">Shorten your link!</h1>
+		<div>
+			<input name="text" type="url" value id="linkinput" placeholder="Paste a URL to shorten" /> <br> <br>
+			<input name="path" type="text" value id="pathinput" placeholder="Custom path (optional)" /> <br> <br>
+            <input type="submit" id="myinput" value="Shorten" />
+		</div>
+		<p id="message"></p>
+
+
+
+
+
+		<script>    
+			document.getElementById("myinput").onclick = function () {
+				var link = document.getElementById("linkinput").value;
+				var data = {
+					domain: "link.laavesh.ml",
+					originalURL: link,
+					allowDuplicates: false,
+				};
+                // add custom path if it exists
+                if (document.getElementById("pathinput").value != "") {
+                    data.path = document.getElementById("pathinput").value;
+                }
+				fetch("https://api.short.cm/links/public", {
+					method: "post",
+					headers: {
+						accept: "application/json",
+						"Content-Type": "application/json",
+						authorization: "pk_ynFkEXQHXdWrijOF",
+					},
+					body: JSON.stringify(data),
+				})
+					.then(function (response) {
+                        return response.json();
+					})
+					.then(function (data) {
+                        if (data.error) {
+                            throw data.error;
+                        }
+						document.getElementById("message").innerHTML = "Your short link is " + data.shortURL;
+					})
+                    .catch(function (error) {
+                        console.log(error);
+                        document.getElementById("message").innerHTML = error;
+                    });
+				document.getElementById("linkinput").value = "";
+                document.getElementById("pathinput").value = "";
+			};
+		</script>
+	</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,78 @@
+
+// wait for submit button to be clicked
+document.getElementById("myinput").onclick = function () {
+    // get the link from the input
+    var link = document.getElementById("linkinput").value;
+
+    // data to be sent to the API
+    var data = {
+        domain: "link.laavesh.ml",
+        originalURL: link,
+        allowDuplicates: false,
+    };
+
+    // add custom path if it is given
+    if (document.getElementById("pathinput").value != "") {
+        data.path = document.getElementById("pathinput").value;
+    }
+
+    // send the data to the API
+    fetch("https://api.short.cm/links/public", {
+        method: "post",
+        headers: {
+            accept: "application/json",
+            "Content-Type": "application/json",
+            authorization: "pk_ynFkEXQHXdWrijOF",
+        },
+        body: JSON.stringify(data),
+    })
+    // get the response from the API
+    .then(function (response) {
+        return response.json();
+    })
+    // display the shortened link
+    .then(function (data) {
+        if (data.error) {
+            throw data.error;
+        }
+        let url = String(data.shortURL);
+        url =url.replace("https://", "");
+        console.log(url);
+        document.getElementById("message").innerHTML =  url;
+    })
+    // display error if any
+    .catch(function (error) {
+        console.log(error);
+        document.getElementById("message").innerHTML = error;
+    });
+
+    // clear the input fields
+    document.getElementById("linkinput").value = "";
+    document.getElementById("pathinput").value = "";
+};
+
+
+// Copy the link to the clipboard
+document.getElementById("copy").onclick = function () {
+    // Get the text field
+    var message = document.getElementById("message");
+
+    // get the link
+    url = message.innerHTML;
+
+
+    // Copy link to clipboard
+    navigator.clipboard.writeText(url);
+
+    // Alert copied to clipboard
+    message.innerHTML = "Copied!";
+    console.log("Copied!");
+
+    // Change back to link after 800ms
+    setTimeout(function () {
+        message.innerHTML = url;
+    }, 800); 
+
+
+
+}