You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
4.0 KiB
HTML
71 lines
4.0 KiB
HTML
3 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<meta name="description" content="An Easy, Fast and Secured URL shortener">
|
||
|
|
<title>MrKayJayDee URL Shortener</title>
|
||
|
|
<link rel="icon" href="https://i.imgur.com/Dnmmfqd.png">
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="flex h-screen justify-center items-center">
|
||
|
|
<div class="bg-white rounded m-2 sm:m-5 p-3 sm:p-10 shadow-md">
|
||
|
|
<p class="text-center">
|
||
|
|
<input id="link" class="border py-2 px-3 text-grey-darkest content-auto rounded-lg border-black" type="text" placeholder="Your URL">
|
||
|
|
<button id="shorten" class="text-center mt-5 rounded-2xl text-white py-1 px-5 text-base shadow overflow-ellipsis cursor-pointer bg-blue-600" type="submit" onclick="shortenLink()">Get Shortened url</button>
|
||
|
|
</p>
|
||
|
|
<div class="pt-5" id="shortenedLink">
|
||
|
|
<p class="font-bold text-center">Shortened Link:</p>
|
||
|
|
<p class="text-center">
|
||
|
|
<a target="_blank" href="" id="shortenedLinkText">None</a>
|
||
|
|
</p>
|
||
|
|
<p class="font-bold text-center">Clicks Count</p>
|
||
|
|
<p class="text-center" id="clicksCount">None</p>
|
||
|
|
<p class="font-bold text-center">Creation Date</p>
|
||
|
|
<p class="text-center" id="creationDate">None</p>
|
||
|
|
<p class="pt-8 text-center">
|
||
|
|
<a class="text-center mt-5 rounded-2xl text-white py-1 px-5 text-base shadow overflow-ellipsis cursor-pointer bg-blue-600" href="docs">Documentation</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="pt-5" id="state"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script>
|
||
|
|
function shortenLink() {
|
||
|
|
let url = document.getElementById("link").value;
|
||
|
|
if (validateUrl(url)) {
|
||
|
|
let xhr = new XMLHttpRequest();
|
||
|
|
xhr.open("POST", "http://localhost:8080/api/short", true);
|
||
|
|
xhr.setRequestHeader("Content-Type", "application/json");
|
||
|
|
xhr.responseType = 'json';
|
||
|
|
xhr.send(JSON.stringify({
|
||
|
|
origUrl: url
|
||
|
|
}));
|
||
|
|
xhr.onreadystatechange = function (evt) {
|
||
|
|
if (xhr.readyState !== 4) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
document.getElementById("shortenedLinkText").innerHTML = xhr.response.shortUrl;
|
||
|
|
document.getElementById("shortenedLinkText").href = xhr.response.shortUrl;
|
||
|
|
document.getElementById("clicksCount").innerHTML = xhr.response.clicks;
|
||
|
|
document.getElementById("creationDate").innerHTML = new Date(xhr.response.date).toLocaleString();
|
||
|
|
document.getElementById("state").innerHTML = "<p class='text-center text-green-600'>URL successfully retrieved</p>";
|
||
|
|
};
|
||
|
|
} else {
|
||
|
|
document.getElementById("state").innerHTML = "<p class='text-center text-red-600'>Invalid URL</p>";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function validateUrl(value) {
|
||
|
|
return /^(http|https|ftp)\:\/\/([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|localhost|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.([a-zA-Z]{1,}))(\:[0-9]+)*(\/($|[a-zA-Z0-9\.\,\?\'\\\+&%\$#\=~_\-]+))*$/gm.test(
|
||
|
|
value
|
||
|
|
);
|
||
|
|
}
|
||
|
|
document.querySelector("#link").addEventListener("keyup", event => {
|
||
|
|
if(event.key !== "Enter") return;
|
||
|
|
document.querySelector("#shorten").click();
|
||
|
|
event.preventDefault();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</html>
|