4S SELECT
QR code generator using qrcode.js
To visit 4S Select scan below code
Write a complete responsive code of the QR Code Generator tool with various qr options like URL, WhatsApp, text, mail, etc with a download qr code button in colorful styling and all its features use qrcode.min.js free library if required make sure library is added in tool to make this tool in HTML and CSS with JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>QR Code Generator</title>
<style>
h1, h3 {
color: green;
}
body, header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js">
</script>
</head>
<body>
<header>
<h1>4S select</h1>
<h3>QR code generator using qrcode.js</h3>
<h3>Enter QR code content and generate QR</h3>
</header>
<main>
<form action="/"
id="qr-generation-form">
<input type="text"
name="qr-code-content"
id="qr-content"
value=""
placeholder="Enter QR content"
autocomplete="off" />
<input type="submit"
value="Generate QR Code" />
</form><br />
<div id="qr-code"></div>
</main>
</body>
<script>
let qrContentInput = document.getElementById("qr-content");
let qrGenerationForm =
document.getElementById("qr-generation-form");
let qrCode;
function generateQrCode(qrContent) {
return new QRCode("qr-code", {
text: qrContent,
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
});
}
// Event listener for form submit event
qrGenerationForm.addEventListener("submit", function (event) {
// Prevent form submission
event.preventDefault();
let qrContent = qrContentInput.value;
if (qrCode == null) {
// Generate code initially
qrCode = generateQrCode(qrContent);
} else {
// If code already generated then make
// again using same object
qrCode.makeCode(qrContent);
}
});
</script>
</html>
Output: