Pages

Saturday, 17 August 2024

QR CODE GENERATOR



QR Code Generator

QR Code Generator

CSS (styles.css) css Copy code body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Arial, sans-serif; background: linear-gradient(to right, #ff416c, #ff4b2b); color: #ffffff; } .container { text-align: center; background: rgba(0, 0, 0, 0.6); padding: 30px; border-radius: 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); width: 90%; max-width: 400px; } h1 { font-size: 36px; margin-bottom: 20px; letter-spacing: 2px; } #textInput { width: 100%; padding: 10px; font-size: 16px; border-radius: 5px; border: none; margin-bottom: 20px; } #generateButton { padding: 10px 20px; font-size: 18px; background-color: #1e90ff; border: none; border-radius: 5px; cursor: pointer; color: #ffffff; transition: background-color 0.3s ease; } #generateButton:hover { background-color: #1c75d9; } #qrcode { margin-top: 20px; } JavaScript (script.js) javascript Copy code document.getElementById('generateButton').addEventListener('click', function() { const textInput = document.getElementById('textInput').value; const qrcodeContainer = document.getElementById('qrcode'); // Clear previous QR code if it exists qrcodeContainer.innerHTML = ""; if (textInput) { new QRCode(qrcodeContainer, { text: textInput, width: 200, // size of QR code height: 200, // size of QR code colorDark: "#000000", // Dark color colorLight: "#ffffff", // Light color correctLevel: QRCode.CorrectLevel.H }); } else { alert("Please enter text or URL to generate QR code!"); } });

No comments:

Post a Comment