html
Copy code
QR Code Generator
2. CSS (styles.css)
This styles the QR Code Generator tool to be responsive and colorful.
css
Copy code
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
margin-bottom: 20px;
color: #333;
}
.qr-options {
margin-bottom: 20px;
}
.input-group {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
input[type="text"] {
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
width: 60%;
margin-right: 10px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #ff7e5f;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #feb47b;
}
.qr-result {
margin-top: 20px;
}
#qrcode {
margin: 0 auto;
width: 256px;
height: 256px;
}
@media (max-width: 600px) {
input[type="text"] {
width: 100%;
margin-bottom: 10px;
}
.input-group {
flex-direction: column;
}
}
3. JavaScript (scripts.js)
This handles the QR code generation logic and downloading functionality.
javascript
Copy code
function generateQRCode() {
const qrType = document.getElementById('qrType').value;
const inputData = document.getElementById('inputData').value;
let qrData = '';
switch (qrType) {
case 'url':
qrData = inputData;
break;
case 'whatsapp':
qrData = `https://wa.me/${inputData}`;
break;
case 'text':
qrData = inputData;
break;
case 'mail':
qrData = `mailto:${inputData}`;
break;
default:
alert('Invalid QR type');
return;
}
const qrCodeContainer = document.getElementById('qrcode');
qrCodeContainer.innerHTML = '';
new QRCode(qrCodeContainer, {
text: qrData,
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff"
});
}
function downloadQRCode() {
const qrCodeImg = document.querySelector('#qrcode img');
if (qrCodeImg) {
const link = document.createElement('a');
link.href = qrCodeImg.src;
link.download = 'qrcode.png';
link.click();
} else {
alert('Please generate a QR code first.');
}
}
