QR Code Generator
QR Code Generator
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 100%;
max-width: 500px;
}
h1 {
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-control {
width: 100%;
padding: 10px;
border-radius: 4px;
border: 1px solid #ddd;
}
.btn {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.btn:hover {
background-color: #0056b3;
}
.hidden {
display: none;
}
.qr-code-container {
margin: 20px 0;
}
.qr-code-container img {
max-width: 100%;
height: auto;
}
document.addEventListener('DOMContentLoaded', () => {
const qrTypeSelect = document.getElementById('qr-type');
const qrInput = document.getElementById('qr-input');
const generateBtn = document.getElementById('generate-btn');
const qrCodeContainer = document.getElementById('qr-code-container');
const downloadBtn = document.getElementById('download-btn');
const generateQRCode = (text) => {
QRCode.toDataURL(text, { color: { dark: '#000000', light: '#ffffff' } }, (err, url) => {
if (err) {
console.error(err);
return;
}
qrCodeContainer.innerHTML = `
`;
downloadBtn.classList.remove('hidden');
downloadBtn.setAttribute('href', url);
downloadBtn.setAttribute('download', 'qrcode.png');
});
};
generateBtn.addEventListener('click', () => {
const type = qrTypeSelect.value;
let text = qrInput.value.trim();
if (text) {
switch (type) {
case 'URL':
generateQRCode(text);
break;
case 'WhatsApp':
generateQRCode(`https://wa.me/${text}`);
break;
case 'Text':
generateQRCode(text);
break;
case 'Email':
generateQRCode(`mailto:${text}`);
break;
default:
alert('Invalid QR Code type.');
}
} else {
alert('Please enter the input.');
}
});
downloadBtn.addEventListener('click', () => {
// This will trigger the download when the button is clicked.
});
});
