Deleted useless lines of code, optimized .js files, improved LightHou…

…se performance
liyasthomas · Apr 3, 2019 · 34db065 · 34db065
1 parent d6550cf
commit 34db065
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 63 deletions.
diff --git a/src/index.css b/src/index.css
@@ -20,7 +20,7 @@ a {
 }
 
 p {
-	max-width: 512px;
+	max-width: 600px;
 	color: #aaa;
 }
 
@@ -57,7 +57,7 @@ header {
 
 .form {
 	width: 100%;
-	max-width: 512px;
+	max-width: 600px;
 }
 
 input {
@@ -77,10 +77,6 @@ input:last-of-type {
 	border-radius: 0;
 }
 
-label {
-	display: none;
-}
-
 button {
 	width: 100%;
 	padding: 24px;

diff --git a/src/index.html b/src/index.html
@@ -77,12 +77,12 @@ <h1><a href="/">mnmlurl</a></h1>
 		</header>
 		<div class="flex"></div>
 		<form class="form" action="javascript:void(0);">
+			<label for="urlinput"></label>
 			<input type="url" id="urlinput" placeholder="paste a long url">
-			<label for="urlinput">long url</label>
 			<div id="erbox"></div>
+			<label for="custominput"></label>
 			<input type="text" maxlength=20 id="custominput" placeholder="custom alias (optional)">
-			<label for="custominput">custom alias</label>
-			<button id="sbtn" type="submit"><span id="rotate">🔗</span> <span id="status">shorten</span></button>
+			<button id="sbtn" type="submit" aria-label="shorten"><span id="rotate">🔗</span> <span id="status">shorten</span></button>
 		</form>
 		<div class="form" id="output" style="display: none">
 			<div id="alias"></div>

diff --git a/src/index.js b/src/index.js
@@ -1,16 +1,21 @@
-let bg = ['#76ecfe', '#b8affd', '#9fd6fd', '#fbf3b0', '#ffd0c6'];
-let randomBg = bg[Math.floor(Math.random() * bg.length)];
-document.getElementById("sbtn").style.backgroundColor = randomBg;
-
+const erbox = document.getElementById("erbox");
+const custominput = document.getElementById("custominput");
+const output = document.getElementById("output");
+const rotate = document.getElementById("rotate");
+const status = document.getElementById("status");
+const alias = document.getElementById("alias");
+const sucess = document.getElementById("sucess");
+const shortenedURL = document.getElementById("shortenedURL");
+const sbtn = document.getElementById("sbtn");
 let pushJSON = (url, data) => {
 	let request = new XMLHttpRequest();
 	request.open('POST', url);
 	request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
 	request.send(JSON.stringify(data));
 };
 let cinp = () => {
-	document.getElementById("erbox").innerHTML = "";
-	let cival = document.getElementById("custominput").value;
+	erbox.innerHTML = "";
+	let cival = custominput.value;
 	let res = JSON.parse(fetchJSON(endpoint + '/' + cival));
 	let data = res.result;
 	if (data != null) {
@@ -31,11 +36,11 @@ let getrandom = () => {
 	return text;
 };
 let genhash = () => {
-	if (document.getElementById("custominput").value == "") {
+	if (custominput.value == "") {
 		window.location.hash = getrandom();
 		check_is_unique();
 	} else {
-		window.location.hash = document.getElementById("custominput").value;
+		window.location.hash = custominput.value;
 	}
 };
 let check_is_unique = () => {
@@ -50,21 +55,21 @@ let copyer = (containerid) => {
 	let elt = document.getElementById(containerid);
 	if (document.selection) { // IE
 		if (elt.nodeName.toLowerCase() === "input") {
-			document.getElementById(containerid).select();
+			elt.select();
 			document.execCommand("copy");
 		} else {
 			let range = document.body.createTextRange();
-			range.moveToElementText(document.getElementById(containerid));
+			range.moveToElementText(elt);
 			range.select();
 			document.execCommand("copy");
 		}
 	} else if (window.getSelection) {
 		if (elt.nodeName.toLowerCase() === "input") {
-			document.getElementById(containerid).select();
+			elt.select();
 			document.execCommand("copy");
 		} else {
 			let range_ = document.createRange();
-			range_.selectNode(document.getElementById(containerid));
+			range_.selectNode(elt);
 			window.getSelection().removeAllRanges();
 			window.getSelection().addRange(range_);
 			document.execCommand("copy");
@@ -76,74 +81,72 @@ let send_request = (url) => {
 	let address = endpoint + "/" + window.location.hash.substr(1);
 	// console.log(address)
 	pushJSON(address, myurl);
-	document.getElementById('output').style.display = "block";
-	document.getElementById('shortenedURL').value = window.location.href;
+	output.style.display = "block";
+	shortenedURL.value = window.location.href;
 	copyer("shortenedURL");
-	document.getElementById('sucess').innerHTML = "short url copied to clipboard 🚀";
-	document.getElementById("rotate").classList.remove("spinning");
-	document.getElementById("status").innerHTML = "shorten";
-	document.getElementById("alias").innerHTML = "shortened 🎉";
+	sucess.innerHTML = "short url copied to clipboard 🚀";
+	rotate.classList.remove("spinning");
+	status.innerHTML = "shorten";
+	alias.innerHTML = "shortened 🎉";
 };
 
 function sleep(ms) {
 	return new Promise(resolve => setTimeout(resolve, ms));
 }
 let shorturl = async () => {
-	document.getElementById("erbox").innerHTML = "";
-	document.getElementById("sucess").innerHTML = "";
-	document.getElementById("rotate").setAttribute("class", "spinning");
-	document.getElementById("status").innerHTML = "";
-	document.getElementById('output').style.display = "none";
+	erbox.innerHTML = "";
+	sucess.innerHTML = "";
+	rotate.setAttribute("class", "spinning");
+	status.innerHTML = "";
+	output.style.display = "none";
 	await sleep(1000);
 	let longurl = geturl();
 	let re = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/;
 	let cre = /^([a-zA-Z0-9 _-]+)$/;
 	let protocol_ok = re.test(longurl);
 	if (!protocol_ok) {
-		document.getElementById("erbox").innerHTML = "🤔 invalid url";
-		document.getElementById("rotate").classList.remove("spinning");
-		document.getElementById("status").innerHTML = "shorten";
-		document.getElementById("sucess").innerHTML = "";
-		document.getElementById('output').style.display = "none";
+		erbox.innerHTML = "🤔 invalid url";
+		rotate.classList.remove("spinning");
+		status.innerHTML = "shorten";
+		sucess.innerHTML = "";
+		output.style.display = "none";
 	} else {
-		document.getElementById("erbox").innerHTML = "";
-		if (document.getElementById("custominput").value == "") {
+		erbox.innerHTML = "";
+		if (custominput.value == "") {
 			genhash();
 			send_request(longurl);
 		} else {
-			if (cre.test(document.getElementById("custominput").value)) {
+			if (cre.test(custominput.value)) {
 				if (cinp()) {
-					document.getElementById("alias").innerHTML = "alias available ✨";
-					document.getElementById("rotate").classList.remove("spinning");
-					document.getElementById("status").innerHTML = "shorten";
+					alias.innerHTML = "alias available ✨";
+					rotate.classList.remove("spinning");
+					status.innerHTML = "shorten";
 					genhash();
 					send_request(longurl);
 				} else {
-					document.getElementById("erbox").innerHTML = "😒 alias already in use, choose another";
-					document.getElementById("custominput").placeholder = document.getElementById("custominput").value;
-					document.getElementById("custominput").value = "";
-					document.getElementById("rotate").classList.remove("spinning");
-					document.getElementById("status").innerHTML = "shorten";
-					document.getElementById("sucess").innerHTML = "";
-					document.getElementById('output').style.display = "none";
+					erbox.innerHTML = "😒 alias already in use, choose another";
+					custominput.placeholder = custominput.value;
+					custominput.value = "";
+					rotate.classList.remove("spinning");
+					status.innerHTML = "shorten";
+					sucess.innerHTML = "";
+					output.style.display = "none";
 				}
 			} else {
-				document.getElementById("erbox").innerHTML = "😮 invalid custom alias, use only alphanumerics & underscore";
-				document.getElementById("custominput").placeholder = document.getElementById("custominput").value;
-				document.getElementById("custominput").value = "";
-				document.getElementById("rotate").classList.remove("spinning");
-				document.getElementById("status").innerHTML = "shorten";
-				document.getElementById("sucess").innerHTML = "";
-				document.getElementById('output').style.display = "none";
+				erbox.innerHTML = "😮 invalid custom alias, use only alphanumerics & underscore";
+				custominput.placeholder = custominput.value;
+				custominput.value = "";
+				rotate.classList.remove("spinning");
+				status.innerHTML = "shorten";
+				sucess.innerHTML = "";
+				output.style.display = "none";
 			}
 		}
 	}
 };
-document.getElementById("sbtn").addEventListener("click", shorturl);
-
-//let r = JSON.parse(fetchJSON(endpoint)).result;
-//document.getElementById("count").innerHTML = Object.keys(r).length + " urls minimalized";
-
-//fetch(endpoint + "key", {
+sbtn.addEventListener("click", shorturl);
+//fetch(endpoint + "/key", {
 //	method: 'DELETE',
 //});
+//let r = JSON.parse(fetchJSON(endpoint)).result;
+//document.getElementById("count").innerHTML = Object.keys(r).length + " urls minimalized";