Sujay's Free Tools(QR Code generator)
Certainly! Below is a simple example of a QR Code Generator tool using HTML, CSS, and JavaScript with the qrcode.min.js library. This code supports generating QR codes for URL, WhatsApp, text, and email, and it includes a download button for the generated QR code.
```html
<!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>
body {
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
#qr-code {
max-width: 300px;
margin-bottom: 20px;
}
select, button {
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<div>
<label for="qr-type">Select QR Type:</label>
<select id="qr-type">
<option value="url">URL</option>
<option value="whatsapp">WhatsApp</option>
<option value="text">Text</option>
<option value="email">Email</option>
</select>
<br>
<label for="qr-input">Enter QR Data:</label>
<input type="text" id="qr-input" placeholder="Enter data">
<br>
<button onclick="generateQR()">Generate QR Code</button>
<br>
<div id="qr-code"></div>
<button onclick="downloadQR()">Download QR Code</button>
</div>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script>
const qrCodeDiv = document.getElementById('qr-code');
const qrTypeSelect = document.getElementById('qr-type');
const qrInput = document.getElementById('qr-input');
let qr;
function generateQR() {
const type = qrTypeSelect.value;
const data = qrInput.value;
if (!data) {
alert('Please enter data for the QR code.');
return;
}
if (qr) {
qr.clear();
}
qr = new QRCode(qrCodeDiv, {
text: data,
width: 300,
height: 300,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
}
function downloadQR() {
if (qr) {
const dataUrl = qr.toDataURL("image/png");
const a = document.createElement('a');
a.href = dataUrl;
a.download = 'qrcode.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
} else {
alert('Please generate a QR code first.');
}
}
</script>
</body>
</html>
```
This code uses the qrcode.min.js library to generate QR codes dynamically based on user input. It includes a selection dropdown for different QR types, an input field for data entry, a button to generate the QR code, and another button to download the generated QR code as an image. The styling is kept simple, and you can further customize it based on your preferences.
Comments
Post a Comment