QR Code Generator
<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
input, select {
width: 300px;
padding: 10px;
margin: 10px;
}
button {
padding: 10px 20px;
cursor: pointer;
}
#qrcode {
margin-top: 20px;
}
</style>
</head>
<body>
<h2>QR Code Generator</h2>
<select id="qrType">
<option value="text">Text/URL</option>
<option value="website">Website</option>
<option value="contact">Contact (vCard)</option>
<option value="email">Email</option>
<option value="phone">Phone Number</option>
<option value="sms">SMS</option>
<option value="wifi">WiFi</option>
</select>
<input type="text" id="text" placeholder="Enter details">
<select id="color">
<option value="#FFFFFF">White</option>
<option value="#FFCCCC">Light Red</option>
<option value="#CCFFCC">Light Green</option>
<option value="#CCCCFF">Light Blue</option>
<option value="#FFFFCC">Light Yellow</option>
<option value="#FFCCFF">Light Magenta</option>
<option value="#CCFFFF">Light Cyan</option>
<option value="#F0E68C">Khaki</option>
<option value="#E6E6FA">Lavender</option>
<option value="#D3D3D3">Light Gray</option>
</select>
<button onclick="generateQRCode()">Generate QR Code</button>
<div id="qrcode"></div>
<button id="download" style="display:none;" onclick="downloadQRCode()">Download QR Code</button>
<script>
function generateQRCode() {
var type = document.getElementById("qrType").value;
var text = document.getElementById("text").value.trim();
var bgColor = document.getElementById("color").value;
document.getElementById("qrcode").innerHTML = ""; // Clear previous QR Code
if (!text) {
alert("Please enter valid details");
return;
}
let qrContent = "";
switch (type) {
case "text":
case "website":
qrContent = text;
break;
case "contact":
qrContent = `BEGIN:VCARD\nVERSION:3.0\nFN:${text}\nEND:VCARD`;
break;
case "email":
qrContent = `mailto:${text}`;
break;
case "phone":
qrContent = `tel:${text}`;
break;
case "sms":
qrContent = `sms:${text}`;
break;
case "wifi":
qrContent = `WIFI:S:${text};T:WPA;P:yourpassword;;`;
break;
default:
alert("Invalid QR type");
return;
}
new QRCode(document.getElementById("qrcode"), {
text: qrContent,
width: 200,
height: 200,
colorDark: "#000000", // QR code always in black
colorLight: bgColor // Background color changes
});
setTimeout(() => {
document.getElementById("download").style.display = "block";
}, 500);
}
function downloadQRCode() {
var qrCanvas = document.querySelector("#qrcode canvas");
if (qrCanvas) {
var img = qrCanvas.toDataURL("image/png");
var link = document.createElement("a");
link.href = img;
link.download = "qrcode.png";
link.click();
}
}
</script>
</body>
</html>