Generate QR Code using HTML JavaScript code
Updated on: May 29, 2023
There are many APIs available in the market which can allow you to generate QR code using HTML + JavaScript code, but here in this article we are using Google APIs to generate QR code, Google API, just takes content to be generated in the form of QR code and in return it gives QR code.
Content can be anything like URL, Contact Information, telephone number, by just clicking on Generate button as shown in the below HTML output, it will call Google API and in return it will give us QR code. Following is the HTML code to generate QR code using Html & JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>QR Code Generator</title>
</head>
<body style="text-align:center;">
<div>
<div>
<label class="control-label col-sm-2" for="content">
Content: <input type="text" size="60" maxlength="60" class="form-control" id="content" placeholder="Enter content" /></label>
</div>
<div style="margin:20px 20px;">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="btnGenerateQRCode">Generate</button>
</div>
</div>
<div style="margin-top:20px;display:none;" id="qrCodeContainer">Your QR Code is:
<div style="margin-top:20px;"><img src="" class="qr-code-img" /></div>
</div>
</div>
<script src=
"https://code.jquery.com/jquery-3.5.1.js">
</script>
<script>
function htmlEncode(value) {
return $('<div/>').text(value)
.html();
}
$(function () {
$('#btnGenerateQRCode').click(function () {
let qrCodeImage =
'https://chart.googleapis.com/chart?cht=qr&chl=' +
htmlEncode($('#content').val()) +
'&chs=160x160&chld=L|0'
$('#qrCodeContainer').show();
$('.qr-code-img').attr('src', qrCodeImage);
});
});
</script>
</body>
</html>
Output of the above HTML + JavaScript code is:
You can use the above HTML code to generate/create QR code