Enter text or a URL to generate a customizable QR code. (Free securied QR code generator. no tracking included) Please enter valid text or a URL. QR Code Size: 150x150 250x250 300x300 400x400 Foreground Color: Background Color: Generate QR Code Download QR Code // Function to validate the input function validateInput(input) { return input.trim() !== ""; // Ensure input is not empty or just spaces } // Function to generate QR code async function generateQRCode() { const input = document.getElementById('qrInput').value; const errorElement = document.getElementById('inputError'); const qrCodeContainer = document.getElementById('qrCodeContainer'); const qrSize = document.getElementById('qrSize').value; const qrForeground = document.getElementById('qrForeground').value.slice(1); // Remove '#' const qrBackground = document.getElementById('qrBackground').value.slice(1); // Remove '#' const downloadLink = document.getElementById('downloadLink'); // Clear previous QR code and errors qrCodeContainer.innerHTML = ''; downloadLink.style.display = 'none'; errorElement.style.display = 'none'; // Validate the input if (!validateInput(input)) { errorElement.style.display = 'block'; return; } // Generate QR code using a third-party API (e.g., qrserver.com) const qrCodeAPI = `https://api.qrserver.com/v1/create-qr-code/?size=${qrSize}&data=${encodeURIComponent(input)}&color=${qrForeground}&bgcolor=${qrBackground}`; // Create image element to display the QR code const img = document.createElement('img'); img.src = qrCodeAPI; img.alt = "QR Code"; qrCodeContainer.appendChild(img); // Set download link for the QR code after image loads img.onload = async function () { const response = await fetch(qrCodeAPI); const blob = await response.blob(); const url = window.URL.createObjectURL(blob); downloadLink.href = url; downloadLink.style.display = 'block'; // Show the download link }; } .va_styles .qr-container { background-color: #fff; border-radius: 8px; max-width: 600px; margin: 20px auto; padding: 20px; text-align: center; } .va_styles input, .va_styles button, .va_styles select, .va_styles label { width: calc(100% - 22px); margin: 10px 0; padding: 10px; border-radius: 5px; /* border: 1px solid #ccc; */ font-size: 16px; text-align: left; display: inline-block; float: left; width: 50%; height: 45px; } .va_styles button { background-color: #28a745; color: #fff; cursor: pointer; width: 100%; text-align: center; } .va_styles button:hover { background-color: #218838; } .va_styles .qr-code { margin-top: 20px; display: inline-block; width: 100%; } .va_styles img { max-width: 100%; height: auto; } .va_styles .error { color: red; font-size: 14px; display: none; } .va_styles a#downloadLink { display: none; margin-top: 15px; text-decoration: none; color: #fff; background-color: #007bff; padding: 10px 20px; border-radius: 5px; } .va_styles a#downloadLink:hover { background-color: #0056b3; }
