Live
Iframe
Code :
The Bare Bones Structure
<div class="generator-container">
<h1>My Personal QR Generator</h1>
<div class="controls">
<label>
QR Content:
<input type="text" id="qr-content" value="https://my-website.com">
</label>
<!-- More controls coming soon! -->
</div>
<div id="qr-display">
<!-- The magic will appear here -->
</div>
<button id="download-btn">Save QR Code</button>
</div>Script
// First, make sure the library is loaded
const QRCode = window.QRCode;
document.addEventListener('DOMContentLoaded', () => {
const qrContent = document.getElementById('qr-content');
const qrDisplay = document.getElementById('qr-display');
function generateQR() {
const text = qrContent.value.trim();
if (!text) {
qrDisplay.innerHTML = '<p>Type something first!</p>';
return;
}
qrDisplay.innerHTML = ''; // Clear previous QR
new QRCode(qrDisplay, {
text: text,
width: 200,
height: 200,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
}
// Generate immediately
generateQR();
// Update when typing
qrContent.addEventListener('input', generateQR);
});The basic version worked, but I wanted to make it mine. Here's what I added:
-
Size Control
Because sometimes you need a tiny QR code and sometimes you need a billboard-sized one. -
Color Options
Default black-and-white is boring. I wanted neon pink if I felt like it.
<div class="controls">
<!-- Previous input remains -->
<label>
Size:
<input type="range" id="qr-size" min="100" max="500" value="200">
</label>
<label>
Color:
<input type="color" id="qr-color" value="#000000">
</label>
<label>
Error Correction:
<select id="qr-error-level">
<option value="L">Low (7%)</option>
<option value="M">Medium (15%)</option>
<option value="Q">Quartile (25%)</option>
<option value="H" selected>High (30%)</option>
</select>
</label>
</div>The JavaScript updates:
const sizeInput = document.getElementById('qr-size');
const colorInput = document.getElementById('qr-color');
const errorLevelInput = document.getElementById('qr-error-level');
// Update the generateQR function
function generateQR() {
// ... previous code ...
new QRCode(qrDisplay, {
text: text,
width: sizeInput.value,
height: sizeInput.value,
colorDark: colorInput.value,
colorLight: "#ffffff", // Keeping background white for now
correctLevel: QRCode.CorrectLevel[errorLevelInput.value]
});
}
// Add event listeners
sizeInput.addEventListener('input', generateQR);
colorInput.addEventListener('input', generateQR);
errorLevelInput.addEventListener('change', generateQR);✅ Complete code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My QR Generator</title>
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: #f5f5f5;
padding: 20px;
}
.generator-container {
max-width: 500px;
margin: 0 auto;
padding: 25px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
margin-bottom: 25px;
}
.controls {
display: grid;
gap: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}
input, select {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
#qr-display {
min-height: 250px;
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0;
border: 2px dashed #eee;
padding: 10px;
}
#download-btn {
width: 100%;
padding: 10px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background 0.3s;
}
#download-btn:hover {
background: #45a049;
}
</style>
</head>
<body>
<div class="generator-container">
<h1>My Personal QR Generator</h1>
<div class="controls">
<label>
QR Content:
<input type="text" id="qr-content" value="https://my-website.com">
</label>
<label>
Size:
<input type="range" id="qr-size" min="100" max="500" value="200">
</label>
<label>
Color:
<input type="color" id="qr-color" value="#000000">
</label>
<label>
Error Correction:
<select id="qr-error-level">
<option value="L">Low (7%)</option>
<option value="M">Medium (15%)</option>
<option value="Q">Quartile (25%)</option>
<option value="H" selected>High (30%)</option>
</select>
</label>
</div>
<div id="qr-display"></div>
<button id="download-btn">Save QR Code</button>
</div>
<script>
const QRCode = window.QRCode;
document.addEventListener('DOMContentLoaded', () => {
const qrContent = document.getElementById('qr-content');
const qrDisplay = document.getElementById('qr-display');
const downloadBtn = document.getElementById('download-btn');
const sizeInput = document.getElementById('qr-size');
const colorInput = document.getElementById('qr-color');
const errorLevelInput = document.getElementById('qr-error-level');
function generateQR() {
const text = qrContent.value.trim();
if (!text) {
qrDisplay.innerHTML = '<p>Please enter some text first</p>';
return;
}
qrDisplay.innerHTML = '';
new QRCode(qrDisplay, {
text: text,
width: sizeInput.value,
height: sizeInput.value,
colorDark: colorInput.value,
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel[errorLevelInput.value]
});
}
// Download functionality
downloadBtn.addEventListener('click', () => {
const canvas = qrDisplay.querySelector('canvas');
if (!canvas) return;
const link = document.createElement('a');
link.download = 'my-qr-code.png';
link.href = canvas.toDataURL();
link.click();
});
// Initial generation
generateQR();
// Update on changes
qrContent.addEventListener('input', generateQR);
sizeInput.addEventListener('input', generateQR);
colorInput.addEventListener('input', generateQR);
errorLevelInput.addEventListener('change', generateQR);
});
</script>
</body>
</html>