Qr code generator

eTechTune August 17, 2023

<!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>

Qr code generator

You may like these posts

Post a Comment

0 Comments

Author Details

Ad Code

Recent

Comments

Videos

Beauty

Culture

Follow Us @templatesyard

Report Abuse

Recent Slider

Photography

Search This Blog

Breaking News

Main Slider

Technology

Android

iOS

Windows

Business

Fashion

Fashion

Post Top Ad

About Me

Main Tags

Categories

Header Ads

Facebook

Comments

Subscribe Us

Follow Us

Most Popular

Popular Posts

Social Plugin

Popular Posts

Subscribe Us

Facebook

Tags

Menu Footer Widget

Contact form