Create an QR Code Generator Project using HTML CSS & JavaScript
In today's digital world, QR codes are widely used and provide a practical way to share information and access content with a quick scan. This deeply manually operated will show you step-by-step how to create a QR code generator from scratch using HTML, CSS, and JavaScript.
This article will give you the knowledge necessary to develop an intuitive web-based application, regardless of whether you want to generate QR codes for URLs, contact details, or event tickets. Explore all aspects of QR code generation by following our step-by-step instructions.
Preview Image
Prerequisites
Approach
In this code example, we have used a library of JavaScript to create a QR code, and when the user enters any text or link in the input field and presses Enter, that keyword (text) will generate a new QR code by using qrcode.makeCode, and that QR code can be scanned by any device and will give the output that the user entered in the input field.
Example: The above approach implemented below.
<!--Index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css" />
<!-- External QR code library -->
<!--This is the liberary which helps
to convert simple data to the images-->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js">
</script>
</head>
<body>
<div class="header">
<div class="box">
<h1>
QR Code Generator
</h1>
<hr />
<div class="sqrcode"></div>
<div class="qrcode"></div>
<input type="text"
placeholder="Paste a URL or enter
text, then press enter"
onchange="generateQr()" />
<!--generateQr() is the fuction which helps
to convert data into QR using the js library-->
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
/* Style.css */
/* Apply styles to the body */
body {
font-family: "Ubuntu", sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Style the container */
.container {
background-color: #fff;
box-shadow: 0px 0px 10px
rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 20px;
text-align: center;
}
/* Style the header */
.header {
text-align: center;
}
/* Style the h1 element */
h1 {
font-size: 28px;
margin-bottom: 10px;
color: #333;
}
/* Style the hr element */
hr {
border: 1px solid #ddd;
margin: 20px 0;
}
/* Style the input field */
input[type="text"] {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
}
/* Style the QR code div */
.qrcode {
margin: 20px 0;
}
/* Style the button */
button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
}
/* Hover effect for the button */
button:hover {
background-color: #0056b3;
}
// Script.js
// create a new QRCode instance
let qrcode = new QRCode(
document.querySelector(".qrcode")
);
// Initial QR code generation
// with a default message
qrcode.makeCode("Why did you scan me?");
// Function to generate QR
// code based on user input
function generateQr() {
if (
document.querySelector("input")
.value === "" ||
document.querySelector("input")
.value === " ") {
alert(
"Input Field Can not be blank!"
);}
else {
qrcode.makeCode(
document.querySelector(
"input"
).value);
}}
Output:
