Table of Contents
- Introduction
- What is QR Code?
- Prerequisites
- Steps to create QR Code Generator Website
- Output
- Conclusion
Introduction
In this project, we will be building a QR Code Generator Website using HTML, CSS, and JavaScript. This website will allow the user to generate a QR code for any text or link.
What is QR Code?
QR Code is a two-dimensional barcode that can be read by smartphones. It is used to store information such as URLs, phone numbers, addresses, and more. QR codes are used in many places, such as business cards, product packaging, and more. QR codes are used to store information such as URLs, phone numbers, addresses, and more. QR codes are used in many places, such as business cards, product packaging, and more.
QR codes are used to store information such as URLs, phone numbers, addresses, and more. QR codes are used in many places, such as business cards, product packaging, and more.
Prerequisites
- VS Code or any other code editor
- Basic knowledge of HTML
- Basic knowledge of CSS
- Basic knowledge of JavaScript
Steps to create QR Code Generator Website
Step 1: Create a new HTML file
Create a new HTML file and name it index.html
. Add the following code to the file.
<!doctype html>
<head>
<title>JavaScript QR Code Generator</title>
</head>
<body>
<div class="card">
<h3>QR Code Generator</h3>
<div><input id="qr-text" type="text" placeholder="Enter Text to generate QR code"/></div>
<br/>
<div>
<button class="qr-btn" onclick="generateQRCode()">Create QR Code</button>
</div>
<br/>
<p id="qr-result">This is deault QR code:</p>
<canvas id="qr-code"></canvas>
</div>
</body>
</html>
- The
input
tag is used to create an input field where the user can enter the text to generate the QR code. - The
button
tag is used to create a button to generate the QR code. - The
canvas
tag is used to create a canvas to display the QR code. -
The
onclick
attribute is used to call thegenerateQRCode()
function when the button is clicked.Step 2 : Add CSS to the HTML file
Inside the
head
tag, add the following code to add CSS to the HTML file.
<style>
body {
padding:20px;
align-items: center;
justify-content: center;
display: flex;
}
input {
padding:5px;
background-color:transparent;
border:none;
display: flex;
align-items: center;
justify-content: center;
border-bottom:solid 4px #8c52ff;
width:250px;
font-size:16px;
}
.qr-btn {
background-color:#8c52ff;
padding:8px;
display: flex;
align-items: center;
justify-content: center;
color:white;
cursor:pointer;
}
.card{
width: 300px;
height: 450px;
display: flex;
align-items: center;
justify-content: center;
background-color: #c4f9ff;
border-radius: 10px;
padding: 10px;
margin: 10px;
display: inline-block;
}
.card h1{
font-size: 20px;
font-weight: 500;
text-align: center;
}
</style>
- Above code is for styling the HTML file.
- You can customize the CSS according to your needs.
Step 3 : Add JavaScript to the HTML file
- Here we are using the external library for generatring the QR code.
That library is
qrious.min.js
.To add the external library, add the following code inside the
head
tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
- To make everything work, add the following code inside the
body
tag.
<script>
var qr;
(function () {
qr = new QRious({
element: document.getElementById("qr-code"),
size: 200,
value: "https://varshithvhegde.me",
});
})();
function generateQRCode() {
var qrtext = document.getElementById("qr-text").value;
document.getElementById("qr-result").innerHTML =
"QR code for " + qrtext + ":";
qr.set({
foreground: "black",
size: 200,
value: qrtext,
});
}
</script>
- The
generateQRCode()
function is used to generate the QR code. - The
qr.set()
function is used to set the value of the QR code. - The
qrtext
variable is used to store the value of the input field. - The
qr-result
element is used to display the result. - The
qr-code
element is used to display the QR code. - The
qr
variable is used to store the QR code.
Final Code in one file
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<style>
body {
padding: 20px;
align-items: center;
justify-content: center;
display: flex;
}
input {
padding: 5px;
background-color: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
border-bottom: solid 4px #8c52ff;
width: 250px;
font-size: 16px;
}
.qr-btn {
background-color: #8c52ff;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
}
.card {
width: 300px;
height: 450px;
display: flex;
align-items: center;
justify-content: center;
background-color: #c4f9ff;
border-radius: 10px;
padding: 10px;
margin: 10px;
display: inline-block;
}
.card h1 {
font-size: 20px;
font-weight: 500;
text-align: center;
}
@media screen and (max-width: 600px) {
.card {
width: 100%;
}
}
</style>
<title>JavaScript QR Code Generator</title>
</head>
<body>
<div class="card">
<h3>QR Code Generator</h3>
<div>
<input
id="qr-text"
type="text"
placeholder="Enter Text to generate QR code"
/>
</div>
<br />
<div>
<button class="qr-btn" onclick="generateQRCode()">
Create QR Code
</button>
</div>
<br />
<p id="qr-result">This is deault QR code:</p>
<canvas id="qr-code"></canvas>
</div>
<script>
var qr;
(function () {
qr = new QRious({
element: document.getElementById("qr-code"),
size: 200,
value: "https://varshithvhegde.me",
});
})();
function generateQRCode() {
var qrtext = document.getElementById("qr-text").value;
document.getElementById("qr-result").innerHTML =
"QR code for " + qrtext + ":";
qr.set({
foreground: "black",
size: 200,
value: qrtext,
});
}
</script>
</body>
</html>
- Hurrah🎉! You have successfully created a QR Code Generator Website.
- Now, let's see the output.
- Live Demo : QR Code Generator
Output
Conclusion
- In this tutorial, we have learned how to create a QR code generator using JavaScript.
- Let me know your thoughts in the comments section below.
Top comments (2)
How can I use qrious with import statement? I tried to import from './node_modules/...' and so on but it gives me "global is undefined"? Or is it just that the library should be used in a script tag?
Sorry but i doesn't have knowledge about node. I will reasearch and if I get anything I will let you know.