QR Code Generator
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
text-align: center;
}
h1 {
color: #333;
}
.options {
margin-top: 20px;
}
label {
font-weight: bold;
margin-right: 10px;
}
input[type="text"], select {
padding: 10px;
width: 100%;
margin-right: 10px;
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.qr-code {
margin-top: 20px;
}
#downloadQR {
margin-top: 20px;
background-color: #5cb85c;
}
#downloadQR:hover {
background-color: #4cae4c;
}
// script.js
document.addEventListener("DOMContentLoaded", function () {
const qrContentInput = document.getElementById("qrContent");
const qrTypeSelect = document.getElementById("qrType");
const generateQRButton = document.getElementById("generateQR");
const qrCodeContainer = document.getElementById("qrCode");
const downloadQRButton = document.getElementById("downloadQR");
const downloadLink = document.getElementById("downloadLink");
generateQRButton.addEventListener("click", function () {
const qrType = qrTypeSelect.value;
const qrContent = qrContentInput.value;
if (!qrContent) return;
// Generate QR code using qrcode.min.js
const qr = new QRCode(qrCodeContainer, {
text: qrContent,
width: 128,
height: 128,
});
// Show the download button
downloadLink.style.display = "block";
// Generate a data URL for the QR code image
const qrDataURL = qr.toDataURL("image/png");
// Set the data URL as the href attribute of the download link
downloadLink.href = qrDataURL;
});
downloadQRButton.addEventListener("click", function () {
// Trigger the download when the download button is clicked
downloadLink.click();
});
});
No comments:
Post a Comment