Here’s how you can create a dynamic QR code using HTML, CSS, and JavaScript. This example uses the qrcode.js library for generating QR codes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic QR Code Generator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f4f4f9;
}
h1 {
color: #333;
}
input {
width: 300px;
padding: 10px;
margin: 10px 0;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
}
#qrcode {
margin-top: 20px;
padding: 10px;
background: white;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Dynamic QR Code Generator</h1>
<input type="text" id="qrText" placeholder="Enter text or URL" />
<button onclick="generateQRCode()">Generate QR Code</button>
<div id="qrcode"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
function generateQRCode() {
const qrText = document.getElementById('qrText').value;
const qrCodeContainer = document.getElementById('qrcode');
// Clear previous QR code
qrCodeContainer.innerHTML = "";
// Generate new QR code
if (qrText.trim()) {
new QRCode(qrCodeContainer, {
text: qrText,
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
} else {
alert('Please enter some text or a URL.');
}
}
</script>
</body>
</html>How It Works:
- HTML:
- Includes an input field for the user to enter the text or URL.
- A button triggers the QR code generation.
- CSS:
- Basic styling for the page layout and elements.
- JavaScript:
- Uses the
qrcode.jslibrary to dynamically generate QR codes. - Clears any previous QR codes before generating a new one.
- Uses the
Steps to Run:
- Save the code in an
.htmlfile. - Open the file in a web browser.
- Enter a text or URL in the input field and click the “Generate QR Code” button.
You can further enhance this by adding features like downloading the QR code or styling it with more design elements