QR codes, or Quick Response codes, are two-dimensional barcodes that are often used to encode URLs, text, or other data. These codes are easy to scan using a smartphone or other device with a camera, making them a convenient way to share information.
In this blog, we will learn how to generate QR code with JavaScript. Here we will use a QRServer API. QR code has become a important part of our life.
Preview (Generate QR Code with JavaScript)
HTML
<div class="container">
<input type="text" id="text" placeholder="Enter text.." class="input" />
<button type="button" onclick="generateQR()">Generate QR</button>
<div id="qr-image"><span class="error"></span><br/><img src="" id="img" /></div>
<p class="creator">Coded by <a href="https://teamcodearchitects.com" target="_blank">Code Architects</a></p>
</div>CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #ececec;
font-family: Arial, Helvetica, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
padding: 40px 60px;
background: #fff;
display: flex;
align-items: center;
border: 5px solid rgba(190, 190, 190, 0);
box-shadow: 0 0 15px rgba(100, 100, 100, 0.3);
flex-direction: column;
}
.input {
padding: 12px 20px;
width: 300px;
margin-bottom: 20px;
}
button {
padding: 12px 20px;
margin-bottom: 20px;
border: 0;
background: #485696;
color: #fff;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 2px;
}
#qr-image {
display: none;
}
img {
margin-bottom: 20px;
}
.creator {
margin-top: 10px;
}JavaScript
With the use of JavaScript we are able to get the QR code from goqr API & append it to our website.
function generateQR() {
document.querySelector("#qr-image").style.display = "block";
let QRtext = document.querySelector("#text").value;
if(QRtext.trim().length == 0) {
document.querySelector("#qr-image .error").innerHTML = "Please enter text";
document.querySelector("#img").style.display = "none";
} else {
document.querySelector("#img").style.display = "block";
document.querySelector("#qr-image .error").innerHTML = "";
document.querySelector("#img").src = "https://api.qrserver.com/v1/create-qr-code/?size=240x240&data=" + QRtext;
}
}Here is the Github repository link. We are open for Open Source Contribution.
QR codes are a convenient way to share information and can be easily generated using JavaScript. By using a library such as the QRServer, you can quickly create QR codes in your web application and customize their appearance to fit your needs.
Thank you for reading the blog post. Read our other blogs:
