Change axios to ajax post and fix global variable

src/database/database.json

@@ -1 +1 @@
-[]
+[]

src/public/javascripts/script.js

@@ -1,120 +1,155 @@
+// let $ = require("jquery")
+let db = localStorage.getItem("shortens") || "[]";
+db = JSON.parse(db);
+
+function saveToLocalStorage(data) {
+	localStorage.setItem("shortens", JSON.stringify(data));
+}
+
+$(document).on("click", "#shorten", function () {
+	let data = {}
+	let url = $("#url").val()
+	let customKey = $("#custom_key").val()
+	let isCustomKey = $("#custom_key").is(":checked")
+
+	data["url"] = url
+	if (isCustomKey) data['custom_key'] = custom_key
+
+	$.ajax({
+		async: true,
+		cache: false,
+		url: '/api/v1/url',
+		method: 'post',
+		data: data,
+		success: function (response) {
+			$("#result").show()
+			$("#error").hide()
+			let { key, redirect_uri } = response.data
+			let result_url = window.location.href + key
+			$("#redirect_uri").val(result_url)
+			$("#visit_redirect_uri").attr('href', result_url)
+			db.push({ key, redirect_uri})
+			saveToLocalStorage(db)
+		},
+		error: function (response) {
+			let message = response.data.message
+			$("#error").show()
+			$("#result").hide()
+			$("#error").text(message)
+		}
+	})
+})
+
 $(document).ready(function () {
-  var db = localStorage.getItem("shortens") || "[]";
-  db = JSON.parse(db);
-
-  $("#result").hide();
-  $("#error").hide();
-  $("#total_shortens").text(db.length);
-
-  if (db.length < 1) {
-    $("#recent_shortens").hide();
-  } else {
-    $("#recent_shortens").show();
-  }
-
-  $("input:checkbox").click(function () {
-    $("input#custom_key").attr("disabled", !this.checked);
-    if (this.checked) {
-      $("input#custom_key").attr("placeholder", "/your-link");
-    } else {
-      $("input#custom_key").attr("placeholder", "Check to customize your link");
-    }
-  });
-
-  $("#shorten").click(function () {
-    var url = $("#url").val();
-    var customKey = $("#custom_key").val();
-    var isCustomKey = $("input:checkbox").is(":checked");
-    var data = {
-      url: url,
-    };
-
-    if (isCustomKey) data["custom_key"] = customKey;
-
-    axios
-      .post("/api/v1/url", data)
-      .then(({ data: { data: result } }) => {
-        $("#result").show();
-        $("#error").hide();
-        var { key, redirect_uri } = result;
-        $("#redirect_uri").val(`${window.location.href}${key}`);
-        $("#visit_redirect_uri").attr("href", `${window.location.href}${key}`);
-
-        db.push({ key, redirect_uri });
-        saveToLocalStorage(db);
-      })
-      .catch(
-        ({
-          response: {
-            data: { message },
-          },
-        }) => {
-          $("#error").show();
-          $("#result").hide();
-          $("#error").text(message);
-        }
-      );
-  });
-
-  $("#copy").click(function () {
-    copyToClipboard("#redirect_uri");
-    $("#copy").removeClass("btn-outline-info");
-    $("#copy").addClass("btn-success");
-    $("#copy").text("Copied!");
-    setTimeout(() => {
-      $("#copy").removeClass("btn-success");
-      $("#copy").addClass("btn-outline-info");
-      $("#copy").addClass("fa fa-copy");
-      $("#copy").text(" Copy");
-    }, 500);
-  });
-
-  db.reverse().forEach(({ key, redirect_uri }) => {
-    var href = `${window.location.origin}/${key}`;
-
-    var data = `<div class="media text-muted pt-3"><div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray"><div class="d-flex justify-content-between align-items-center w-100"><strong class="text-gray-dark">  ${redirect_uri}</strong><a href="${href}" target="_blank">Visit</a></div><span class="d-block">${href}</span></div></div>`;
-    $("#shortens").append(data);
-  });
-
-  db.slice(db.length - 3, db.length)
-    .reverse()
-    .forEach(({ key, redirect_uri }) => {
-      var href = `${window.location.origin}/${key}`;
-
-      var data = `<div class="media text-muted pt-3"><div class="media-body pb-3 mb-0 medium lh-125 border-bottom border-gray"><div class="d-flex justify-content-between align-items-center w-100"><strong class="text-gray-dark" > ${redirect_uri}</strong><a href="${href}" target="_blank" class="btn btn-outline-primary text-decoration-none" > <i class="fa fa-external-link"></i> Visit</a></div><span class="d-block">${href}</span></div></div>`;
-      $("#recent_shortens").append(data);
-    });
-
-  axios.get("/api/v1/contributors").then(({ data }) => {
-    var { contributors } = data;
-    $("#total_contributors").text(contributors.length);
-    contributors.forEach((user) => {
-      axios.get(`https://api.github.com/users/${user}`).then(({ data: { avatar_url, url, login, name } }) => {
-        axios.get("https://api.github.com/repos/kodingkeun/shorturl/commits").then(({ data: commits }) => {
-          var {
-            author,
-            html_url,
-            commit: { message },
-          } = commits.filter((user) => user.author.login === login)[0];
-          var commit_data = `<a href="${html_url}" target="_blank">${message.split("\n")[0]}</a>`;
-          var data = `<div class="media text-muted pt-3"><img src="${avatar_url}" class="bd-placeholder-img mr-2 rounded" width="100" height="100"><div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray"><div class="d-flex justify-content-between align-items-center w-100"><strong class="text-gray-dark">${
-            name || login
-          } ${author.login === login ? commit_data : ""}</strong><a href="https://github.com/${login}" target="_blank">Follow</a></div><span class="d-block">@${login}</span></div></div>`;
-          $("#contributors").append(data);
-        });
-      });
-    });
-  });
-
-  function saveToLocalStorage(data) {
-    localStorage.setItem("shortens", JSON.stringify(data));
-  }
-
-  function copyToClipboard(element) {
-    var $temp = $("<input>");
-    $("body").append($temp);
-    $temp.val($(element).val()).select();
-    document.execCommand("copy");
-    $temp.remove();
-  }
+	$("#result").hide();
+	$("#error").hide();
+	$("#total_shortens").text(db.length);
+
+	if (db.length < 1) {
+		$("#recent_shortens").hide();
+	} else {
+		$("#recent_shortens").show();
+	}
+
+	$("input:checkbox").click(function () {
+		$("input#custom_key").attr("disabled", !this.checked);
+		if (this.checked) {
+		$("input#custom_key").attr("placeholder", "/your-link");
+		} else {
+		$("input#custom_key").attr("placeholder", "Check to customize your link");
+		}
+	});
+
+	// $("#shorten").click(function () {
+	// 	var url = $("#url").val();
+	// 	var customKey = $("#custom_key").val();
+	// 	var isCustomKey = $("input:checkbox").is(":checked");
+	// 	var data = {
+	// 	url: url,
+	// 	};
+
+	// 	if (isCustomKey) data["custom_key"] = customKey;
+
+	// 	axios
+	// 	.post("/api/v1/url", data)
+	// 	.then(({ data: { data: result } }) => {
+	// 		$("#result").show();
+	// 		$("#error").hide();
+	// 		var { key, redirect_uri } = result;
+	// 		$("#redirect_uri").val(`${window.location.href}${key}`);
+	// 		$("#visit_redirect_uri").attr("href", `${window.location.href}${key}`);
+
+	// 		db.push({ key, redirect_uri });
+	// 		saveToLocalStorage(db);
+	// 	})
+	// 	.catch(
+	// 		({
+	// 		response: {
+	// 			data: { message },
+	// 		},
+	// 		}) => {
+	// 		$("#error").show();
+	// 		$("#result").hide();
+	// 		$("#error").text(message);
+	// 		}
+	// 	);
+	// });
+
+	$("#copy").click(function () {
+		copyToClipboard("#redirect_uri");
+		$("#copy").removeClass("btn-outline-info");
+		$("#copy").addClass("btn-success");
+		$("#copy").text("Copied!");
+		setTimeout(() => {
+		$("#copy").removeClass("btn-success");
+		$("#copy").addClass("btn-outline-info");
+		$("#copy").addClass("fa fa-copy");
+		$("#copy").text(" Copy");
+		}, 500);
+	});
+
+	db.reverse().forEach(({ key, redirect_uri }) => {
+		var href = `${window.location.origin}/${key}`;
+
+		var data = `<div class="media text-muted pt-3"><div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray"><div class="d-flex justify-content-between align-items-center w-100"><strong class="text-gray-dark">  ${redirect_uri}</strong><a href="${href}" target="_blank">Visit</a></div><span class="d-block">${href}</span></div></div>`;
+		$("#shortens").append(data);
+	});
+
+	db.slice(db.length - 3, db.length)
+		.reverse()
+		.forEach(({ key, redirect_uri }) => {
+		var href = `${window.location.origin}/${key}`;
+
+		var data = `<div class="media text-muted pt-3"><div class="media-body pb-3 mb-0 medium lh-125 border-bottom border-gray"><div class="d-flex justify-content-between align-items-center w-100"><strong class="text-gray-dark" > ${redirect_uri}</strong><a href="${href}" target="_blank" class="btn btn-outline-primary text-decoration-none" > <i class="fa fa-external-link"></i> Visit</a></div><span class="d-block">${href}</span></div></div>`;
+		$("#recent_shortens").append(data);
+		});
+
+	axios.get("/api/v1/contributors").then(({ data }) => {
+		var { contributors } = data;
+		$("#total_contributors").text(contributors.length);
+		contributors.forEach((user) => {
+		axios.get(`https://api.github.com/users/${user}`).then(({ data: { avatar_url, url, login, name } }) => {
+			axios.get("https://api.github.com/repos/kodingkeun/shorturl/commits").then(({ data: commits }) => {
+			var {
+				author,
+				html_url,
+				commit: { message },
+			} = commits.filter((user) => user.author.login === login)[0];
+			var commit_data = `<a href="${html_url}" target="_blank">${message.split("\n")[0]}</a>`;
+			var data = `<div class="media text-muted pt-3"><img src="${avatar_url}" class="bd-placeholder-img mr-2 rounded" width="100" height="100"><div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray"><div class="d-flex justify-content-between align-items-center w-100"><strong class="text-gray-dark">${
+				name || login
+			} ${author.login === login ? commit_data : ""}</strong><a href="https://github.com/${login}" target="_blank">Follow</a></div><span class="d-block">@${login}</span></div></div>`;
+			$("#contributors").append(data);
+			});
+		});
+		});
+	});
+
+	function copyToClipboard(element) {
+		var $temp = $("<input>");
+		$("body").append($temp);
+		$temp.val($(element).val()).select();
+		document.execCommand("copy");
+		$temp.remove();
+	}
 });

src/public/stylesheets/style.css

@@ -6,3 +6,7 @@ body {
 a {
   color: #00B7FF;
 }
+
+#result, #error {
+  display: none;
+}

src/views/index.ejs

@@ -35,7 +35,7 @@
           <div class="card p-4">
             <div class="lead d-flex justify-content-center">Paste the URL to be shortened</div>
             <div class="input-group p-2">
-              <input type="text" class="form-control" id="url" placeholder="Your long url" />
+              <input type="text" class="form-control" id="url" placeholder="Paste the url" />
             </div>
             <div class="input-group mt-2 mb-2 p-2">
               <div class="input-group-prepend">

src/views/partials/result.ejs

@@ -1,7 +1,7 @@
 <div class="card p-4 mt-2" id="result">
   <h3>Your shorten link</h3>
   <div class="input-group">
-    <input type="text" class="form-control text-primary" value="" id="redirect_uri" />
+    <input type="text" class="form-control text-dark" value="" id="redirect_uri" />
     <a class="btn btn-outline-primary ml-2" id="visit_redirect_uri" target="_blank"> <i class="fa fa-external-link"></i> Visit</a>
     <button class="btn btn-outline-info ml-2" id="copy"><i class="fa fa-copy"></i> Copy</button>
   </div>

src/views/partials/script.ejs

@@ -1,4 +1,4 @@
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
 <script
   src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
@@ -13,4 +13,4 @@
   referrerpolicy="no-referrer"
 ></script>
 <script src="/javascripts/offcanvas.js"></script>
-<script src="/javascripts/script.js"></script>
+<script src="/javascripts/script.js"></script>