Qr Code Generator HTML source code

Qr Code generator Copy From Here. you will be copy the code then Click Below in "copy" Button

<!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;
text-align: center;
}

.container {
margin: 20px auto;
max-width: 600px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

#qrcode {
margin-top: 20px;
}

#download-link {
display: none;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>QR Code Generator</h1>
<label for="text-input">Enter Text:</label>
<input type="text" id="text-input" placeholder="Enter text...">
<button id="generate-button">Generate QR Code</button>
<div id="qrcode"></div>
<a id="download-link" download="qrcode.png">Download QR Code</a>
</div>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script>
const generateButton = document.getElementById('generate-button');
const textInput = document.getElementById('text-input');
const qrCodeContainer = document.getElementById('qrcode');
const downloadLink = document.getElementById('download-link');

generateButton.addEventListener('click', () => {
const text = textInput.value;
if (text) {
qrCodeContainer.innerHTML = '';
downloadLink.style.display = 'none';

const qrCode = new QRCode(qrCodeContainer, {
text: text,
width: 200,
height: 200,
});

const canvas = qrCodeContainer.querySelector('canvas');
if (canvas) {
const dataURL = canvas.toDataURL('image/png');
downloadLink.href = dataURL;
downloadLink.style.display = 'block';
}
}
});
</script>
</body>
</html>

Post a Comment

إرسال تعليق

About Us

نموذج الاتصال