Today in this blog, you’ll learn how to build a Professional URL Shortener Within Build QR-Code in HTML CSS & JavaScript.
This script allows you to create short URLs. This script is connected to the SBTX server and with the help of ajax it communicates with the server.
The core function of this script is to make large URLs into short one and then from the short URL, it creates the QR codes. For creating QR codes we didn't use any API but we use the jquery QR code plugin. (jquery.qrcode.min.js)
The most interesting feature of this script is that it allows you to customize the short URLs accordingly. and it didn't allow others to create the same short URL which is already created. Once a link is created no one will be able to delete it which means all of the links are secure.
SBTX server provides two types of API they are the maker and fetch API. This entire project is made with maker API so if you want to get the information of your short URL, for example, the total number of clicks and the long URL details etc can be easily fetched through fetch API. If you have basic knowledge about javascript then you can easily make a project on the fetch API of SBTX. You can also visit the SBTX documentation page for more details.
To understand better and also get the previews of this script make sure to check out our youtube video.
This script is divided into two units. One with QR and one without QR are both free to download. The first one is called the "Pro version".HTML source code is provided below. [PRO VERSION]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SBTX SHORT LINK</title>
<style>
body {
font-family: Arial;
}
input[type=text] {
min-width: 280px;
padding: 10px;
font-size: 15px;
font-weight: bold;
border: 1px outset #000;
outline: none;
border-radius: 20px;
margin-bottom: 20px;
}
input[type=button] {
min-width: 300px;
padding: 10px;
font-size: 15px;
border: 1px outset red;
outline: none;
border-radius: 20px;
background: red;
color: white;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
transition: 0.5s;
}
input[type=button]:hover {
border: 1px outset red;
background: white;
color: red;
}
.div_align {
margin-top: 20px;
}
.all-items-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 10px 25px rgba(92, 99, 105, .2);
padding: 20px;
border-radius: 10px;
}
#show-qr {
border: 1px solid #000;
border-radius: 5px;
padding: 5px;
margin-bottom: 20px;
width: 115px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css"
integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="all-items-center">
<center>
<div id="1st_div" class="div_align">
<h1>SBTX SHORT LINK API</h1>
<hr style="border: 3px solid red; border-radius: 10px; width: 100px; margin-bottom: 20px;" />
<input type="text" id="link" placeholder="Enter Your URL" />
<br />
<input type="text" id="surl" placeholder="Short URl" />
<br />
<input type="button" onclick="link_submit()" id="submit_btn" value="Submit" />
</div>
<div style="display: none;" id="2nd_div" class="div_align">
<div id="show-qr"></div>
<input type="text" id="response" readonly />
<br />
<input type="button" onclick="copy_item()" id="copy_btn" value="Copy" />
</div>
</center>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"
integrity="sha512-NFUcDlm4V+a2sjPX7gREIXgCSFja9cHtKPOL1zj6QhnE0vcY695MODehqkaGYTLyL2wxe/wtr4Z49SvqXq12UQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"
integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
toastr.options =
{
"closeButton": true,
"debug": false,
"newestOnTop": true,
"progressBar": true,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
function link_submit() {
var link = document.getElementById("link").value;
var surl = document.getElementById("surl").value;
var submit_btn = document.getElementById("submit_btn");
var one_div = document.getElementById("1st_div");
var two_div = document.getElementById("2nd_div");
var response = document.getElementById("response");
var copy_btn = document.getElementById("copy_btn");
var url = "https://sbtx.ga/api/maker?url=" + link + "&surl=" + surl;
submit_btn.value = "Loading...";
Command: toastr["info"]("Processing ...")
setTimeout(function () {
submit_btn.value = "Almost ready";
}, 1500);
var sbtx_ajax = new XMLHttpRequest();
sbtx_ajax.open("GET", url, true);
sbtx_ajax.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
submit_btn.value = "Submit";
var data = JSON.parse(this.responseText);
if (data.status == "false") {
document.getElementsByTagName("h1")[0].style.color = "red";
//alert(data.response);
Command: toastr["error"](data.response)
}
else {
document.getElementsByTagName("h1")[0].style.color = "green";
two_div.style.display = "block";
response.value = data.response;
$("#show-qr").qrcode({
width: 100,
height: 100,
text: data.response
});
Command: toastr["success"]("Short link successfully generated")
}
}
}
sbtx_ajax.send();
}
function copy_item() {
response.select();
response.setSelectionRange(0, 99999);
navigator.clipboard.writeText(response.value);
copy_btn.value = "copied";
Command: toastr["success"]("Short link copied successfully")
}
</script>
</body>
</html>
Source Code for Free Version.[ FREE VERSION ]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SBTX SHORT LINK</title>
<style>
body {
font-family: Arial;
}
input[type=text] {
min-width: 280px;
padding: 10px;
font-size: 15px;
font-weight: bold;
border: 1px outset #000;
outline: none;
border-radius: 20px;
margin-bottom: 20px;
}
input[type=button] {
min-width: 300px;
padding: 10px;
font-size: 15px;
border: 1px outset red;
outline: none;
border-radius: 20px;
background: red;
color: white;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
transition: 0.5s;
}
input[type=button]:hover {
border: 1px outset red;
background: white;
color: red;
}
.div_align {
margin-top: 20px;
}
.all-items-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 10px 25px rgba(92, 99, 105, .2);
padding: 20px;
border-radius: 10px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css"
integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="all-items-center">
<center>
<div id="1st_div" class="div_align">
<h1>SBTX SHORT LINK API</h1>
<hr style="border: 3px solid red; border-radius: 10px; width: 100px; margin-bottom: 20px;" />
<input type="text" id="link" placeholder="Enter Your URL" />
<br />
<input type="text" id="surl" placeholder="Short URl" />
<br />
<input type="button" onclick="link_submit()" id="submit_btn" value="Submit" />
</div>
<div style="display: none;" id="2nd_div" class="div_align">
<input type="text" id="response" readonly />
<br />
<input type="button" onclick="copy_item()" id="copy_btn" value="Copy" />
</div>
</center>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"
integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
toastr.options =
{
"closeButton": true,
"debug": false,
"newestOnTop": true,
"progressBar": true,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
function link_submit() {
var link = document.getElementById("link").value;
var surl = document.getElementById("surl").value;
var submit_btn = document.getElementById("submit_btn");
var one_div = document.getElementById("1st_div");
var two_div = document.getElementById("2nd_div");
var response = document.getElementById("response");
var copy_btn = document.getElementById("copy_btn");
var url = "https://sbtx.ga/api/maker?url=" + link + "&surl=" + surl;
submit_btn.value = "Loading...";
Command: toastr["info"]("Processing ...")
setTimeout(function () {
submit_btn.value = "Almost ready";
}, 1500);
var sbtx_ajax = new XMLHttpRequest();
sbtx_ajax.open("GET", url, true);
sbtx_ajax.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
submit_btn.value = "Submit";
var data = JSON.parse(this.responseText);
if (data.status == "false") {
document.getElementsByTagName("h1")[0].style.color = "red";
//alert(data.response);
Command: toastr["error"](data.response)
}
else {
document.getElementsByTagName("h1")[0].style.color = "green";
two_div.style.display = "block";
response.value = data.response;
Command: toastr["success"]("Short link successfully generated")
}
}
}
sbtx_ajax.send();
}
function copy_item() {
response.select();
response.setSelectionRange(0, 99999);
navigator.clipboard.writeText(response.value);
copy_btn.value = "copied";
Command: toastr["success"]("Short link copied successfully")
}
</script>
</body>
</html>
Source Code for blogger.[ Blogger Version]<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='utf-8' />
<meta content='width=device-width, initial-scale=1' name='viewport' />
<title>SBTX SHORT LINK</title>
<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css'
integrity='sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g=='
referrerpolicy='no-referrer' rel='stylesheet' />
<b:skin>
<![CDATA[
body { font-family: Arial; } input[type=text] { min-width:280px; padding: 10px; font-size: 15px; font-weight: bold; border: 1px outset #000; outline: none; border-radius: 20px; margin-bottom: 20px; } input[type=button] { min-width:300px; padding: 10px; font-size: 15px; border: 1px outset red; outline: none; border-radius: 20px; background: red; color: white; text-transform: uppercase; font-weight: bold; cursor: pointer; transition: 0.5s; } input[type=button]:hover { border: 1px outset red; background: white; color: red; } .div_align { margin-top: 20px; } .all-items-center { position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); box-shadow: 0 10px 25px rgba(92,99,105,.2); padding: 20px; border-radius: 10px; } #show-qr { border: 1px solid #000; border-radius: 5px; padding: 5px; margin-bottom: 20px; width: 115px; }
]]>
</b:skin>
</head>
<body>
<div class='all-items-center'>
<center>
<div class='div_align' id='1st_div'>
<h1>SBTX SHORT LINK API</h1>
<hr style='border: 3px solid red; border-radius: 10px; width: 100px; margin-bottom: 20px;' />
<input id='link' placeholder='Enter Your URL' type='text' />
<br />
<input id='surl' placeholder='Short URl' type='text' />
<br />
<input id='submit_btn' onclick='link_submit()' type='button' value='Submit' />
</div>
<div class='div_align' id='2nd_div' style='display: none;'>
<div id='show-qr' />
<input id='response' readonly='' type='text' />
<br />
<input id='copy_btn' onclick='copy_item()' type='button' value='Copy' />
</div>
</center>
</div>
<script crossorigin='anonymous'
integrity='sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=='
referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js' />
<script crossorigin='anonymous'
integrity='sha512-NFUcDlm4V+a2sjPX7gREIXgCSFja9cHtKPOL1zj6QhnE0vcY695MODehqkaGYTLyL2wxe/wtr4Z49SvqXq12UQ=='
referrerpolicy='no-referrer'
src='https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js' />
<script crossorigin='anonymous'
integrity='sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw=='
referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js' />
<script>
toastr.options =
{
& quot; closeButton & quot;: true,
& quot; debug & quot;: false,
& quot; newestOnTop & quot;: true,
& quot; progressBar & quot;: true,
& quot; positionClass & quot;: & quot; toast - top - right & quot;,
& quot; preventDuplicates & quot;: false,
& quot; onclick & quot;: null,
& quot; showDuration & quot;: & quot; 300 & quot;,
& quot; hideDuration & quot;: & quot; 1000 & quot;,
& quot; timeOut & quot;: & quot; 5000 & quot;,
& quot; extendedTimeOut & quot;: & quot; 1000 & quot;,
& quot; showEasing & quot;: & quot; swing & quot;,
& quot; hideEasing & quot;: & quot; linear & quot;,
& quot; showMethod & quot;: & quot; fadeIn & quot;,
& quot; hideMethod & quot;: & quot; fadeOut & quot;
}
function link_submit() {
var link = document.getElementById(& quot; link & quot;).value;
var surl = document.getElementById(& quot; surl & quot;).value;
var submit_btn = document.getElementById(& quot; submit_btn & quot;);
var one_div = document.getElementById(& quot; 1st_div & quot;);
var two_div = document.getElementById(& quot; 2nd_div & quot;);
var response = document.getElementById(& quot; response & quot;);
var copy_btn = document.getElementById(& quot; copy_btn & quot;);
var url = & quot; https://sbtx.ga/api/maker?url=" + link + "&surl=" + surl;
submit_btn.value = & quot;Loading...& quot;;
Command: toastr[& quot; info & quot;](& quot;Processing ...& quot;)
setTimeout(function () {
submit_btn.value = & quot;Almost ready & quot;;
}, 1500);
var sbtx_ajax = new XMLHttpRequest();
sbtx_ajax.open(& quot; GET & quot;, url, true);
sbtx_ajax.onreadystatechange = function () {
if (this.readyState == 4 & amp;& amp; this.status == 200)
{
submit_btn.value = & quot; Submit & quot;;
var data = JSON.parse(this.responseText);
if (data.status == & quot; false & quot;)
{
document.getElementsByTagName(& quot; h1 & quot;)[0].style.color = & quot; red & quot;;
//alert(data.response);
Command: toastr[& quot; error & quot;](data.response)
}
else
{
document.getElementsByTagName(& quot; h1 & quot;)[0].style.color = & quot; green & quot;;
two_div.style.display = & quot; block & quot;;
response.value = data.response;
$(& quot; #show - qr & quot;).qrcode({
width: 100,
height: 100,
text: data.response
});
Command: toastr[& quot; success & quot;](& quot;Short link successfully generated & quot;)
}
}
}
sbtx_ajax.send();
}
function copy_item() {
response.select();
response.setSelectionRange(0, 99999);
navigator.clipboard.writeText(response.value);
copy_btn.value = & quot; copied & quot;;
Command: toastr[& quot; success & quot;](& quot;Short link copied successfully & quot;)
}
</script>
<b:section id='sbtx' />
</body>
</html>
0 Comments