Description:
QRGenius is your swift QR Code Generator. Input text or URLs, and instantly create QR codes. Effortlessly download the generated QR code as a PNG file. Simplify sharing information with QRGenius—a responsive and user-friendly solution for all your code-generating needs.
[QR Code Generator] with HTML, CSS, and JavaScript. Include features such as text input for generating QR codes and a downloadable QR code image.
CODE IN PROJECT
<!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;
background-color: #f4f4f4;
text-align: center;
margin: 50px;
}
#generator {
max-width: 600px;
margin: auto;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input {
width: 100%;
padding: 10px;
box-sizing: border-box;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #4caf50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:active {
background-color: #45a049;
}
#qr-code {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="generator">
<h2>QR Code Generator</h2>
<input type="text" id="text-input" placeholder="Enter text or URL">
<button onclick="generateQRCode()">Generate QR Code</button>
<div id="qr-code"></div>
</div>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script>
function generateQRCode() {
const textInput = document.getElementById('text-input').value;
const qrCodeContainer = document.getElementById('qr-code');
// Clear previous QR code
qrCodeContainer.innerHTML = '';
// Generate QR code
const qrcode = new QRCode(qrCodeContainer, {
text: textInput,
width: 200,
height: 200
});
// Add a download button
const downloadBtn = document.createElement('a');
downloadBtn.href = qrCodeContainer.getElementsByTagName('img')[0].src;
downloadBtn.download = 'qrcode.png';
downloadBtn.innerHTML = '<br><button>Download QR Code</button>';
qrCodeContainer.appendChild(downloadBtn);
}
</script>
</body>
</html
This code provides a simple QR Code Generator with an input field to enter text or a URL. Users can generate a QR code, and the generated code is displayed along with a download button. When clicked, the download button saves the QR code as a PNG file. Note that you should include the qrcode.min.js library for generating QR codes.
No comments:
Post a Comment