JS-QR Generator
<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>QR Code Generator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<style>
.none {
display: none;
}
.fab {
color: #000;
}
</style>
</head>
<body>
<div class="container p-5">
<div class="row">
<div class="col-lg-12 pb-5 text-center">
<h1>Simple QR Code Generator</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<div class="form-floating">
<select name="qrType" id="qrType" class="form-select" aria-label="QR Type Select">
<option value="">Select</option>
<option value="text">Text</option>
<option value="contact">Contact</option>
<option value="sms">SMS</option>
</select>
<label for="qrType">QR Type</label>
</div>
</div>
<div class="col-md-3 mb-3 d-grid gap-2" id="qrGenerateBtnDesktopCont">
<button class="btn btn-outline-success none" id="qrGenerateBtn">Generate</button>
</div>
<div class="col-md-3 mb-3 d-grid gap-2" id="qrDownloadBtnDesktopCont">
<button class="btn btn-outline-warning none" id="qrDownloadBtn">Download</button>
</div>
<div class="col-md-2 mb-3 d-grid gap-2">
<a href="https://github.com/mhabib555/Js_simple-qrcode-example" target="_blank"><i
class="fab fa-github fa-3x"></i></a>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="mb-3 qrInputContainer none" id="qrInputTextContainer">
<label for="qrText">Your text</label>
<textarea type="text" class="form-control" id="qrText" cols="130" rows="5">Text</textarea>
</div>
<div class="mb-3 qrInputContainer none" id="qrInputContactContainer">
<div class="row">
<div class="col-md-2">
<div class="form-floating mb-3">
<select name="qrTitle" id="qrTitle" class="form-select">
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Mrs">Mrs</option>
</select>
<label for="qrTitle">Title</label>
</div>
</div>
<div class="col-md-3">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="qrFirstName" />
<label for="qrFirstName">First Name</label>
</div>
</div>
<div class="col-md-3">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="qrLastName" />
<label for="qrLastName">Last Name</label>
</div>
</div>
<div class="col-md-4 ">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="qrPhoneNumber" />
<label for="qrPhoneNumber">Phone Number</label>
</div>
</div>
</div>
</div>
<div class="mb-3 qrInputContainer none" id="qrInputSmsContainer">
<div class="row">
<div class="col-md-3">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="qrSmsNumber" />
<label for="qrSmsNumber">Phone Number</label>
</div>
</div>
<div class="col-md-9">
<div class="form-floating mb-3">
<textarea class="form-control" id="qrSmsText" cols="30" rows="5">Text</textarea>
<label for="qrSmsText">Sms Text</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 mb-3 d-grid gap-2" id="qrGenerateBtnMobileCont"></div>
<div class="col-lg-12 mb-3 d-grid gap-2" id="qrDownloadBtnMobileCont"></div>
</div>
<div class="row">
<div class="col-lg-12 d-lg-flex justify-content-center text-center">
<div id="qrCodeResult"></div>
<span id="downloadImgLink" class="none"></span>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@gh-pages/qrcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script>
class QrFormatter {
formatAsVCard(title, firstName, lastName, phone) {
let html = `BEGIN:VCARD \n
VERSION:3.0 \n`;
html += `N:${lastName};${firstName};;${title} \n`;
html += `FN:${firstName} ${lastName} \n`;
html += `TEL:${phone} \n`;
html += `END: VCARD`;
return html;
}
formatAsSms(phoneNumber, text) {
return `SMSTO:${phoneNumber}:${text}`;
}
}
$(document).ready(function() {
$("#qrType").on('change', function() {
$(".qrInputContainer").hide();
let val = this.value;
if (val === 'text') {
$("#qrInputTextContainer").show();
} else if (val === 'contact') {
$("#qrInputContactContainer").show();
} else if (val === 'sms') {
$("#qrInputSmsContainer").show();
}
$("#qrGenerateBtn").show();
});
if (window.innerWidth < 766) {
$("#qrGenerateBtnMobileCont").html($("#qrGenerateBtnDesktopCont").html());
$("#qrGenerateBtnDesktopCont").html("")
$("#qrDownloadBtnMobileCont").html($("#qrDownloadBtnDesktopCont").html());
$("#qrDownloadBtnDesktopCont").html("")
}
$("#qrGenerateBtn").on('click', async() => {
$("#qrDownloadBtn").hide();
let qrFormatter = new QrFormatter();
document.getElementById("qrCodeResult").innerHTML = "";
let qrType = $("#qrType").val();
let text = '';
if (qrType === 'text') {
text = $("#qrText").val();
} else if (qrType === 'contact') {
let title = $("#qrTitle").val();
let firstName = $("#qrFirstName").val();
let lastName = $("#qrLastName").val();
let phoneNumber = $("#qrPhoneNumber").val();
text = qrFormatter.formatAsVCard(title, firstName, lastName, phoneNumber);
} else if (qrType === 'sms') {
let phoneNumber = $("#qrSmsNumber").val();
let smsText = $("#qrSmsText").val();
text = qrFormatter.formatAsSms(phoneNumber, smsText);
}
await new QRCode(document.getElementById("qrCodeResult"), text);
$("#qrDownloadBtn").show();
})
$("#qrDownloadBtn").on('click', () => {
let imgData = $("#qrCodeResult img").attr('src');
let downloadImgLink = $("#downloadImgLink");
let filename = new Date().getTime() + ".jpg";
$('<a>', {
text: 'Download',
href: imgData,
download: filename,
class: "downloadImgLinkId"
}).appendTo('#downloadImgLink');
// imgData = imgData.split("data:image/png;")[1];
// window.location.href = imgData;
document.querySelector('.downloadImgLinkId').click();
})
});
</script>
</body>
</html>
See the Pen JS-QR Generator by Muhammad Habib (@mhabib555) on CodePen.
Comments
Post a Comment