13.qr-code-generator

<title>Enhanced QR Code Generator</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: Arial, sans-serif;

}

body {

padding: 25px;

text-align: center;

background-color: #f0f0f0;

display: flex;

flex-direction: column;

align-items: center;

min-height: 100vh;

}

h1 {

margin-bottom: 30px;

color: #333;

}

.qr-text {

padding: 12px 20px;

width: 100%;

max-width: 400px;

border: 2px solid #3498db;

border-radius: 5px;

margin: 20px 0;

font-size: 18px;

transition: border-color 0.3s ease;

}

.qr-text:focus {

outline: none;

border-color: #2980b9;

}

.generate-qr-code-btn {

padding: 12px 24px;

font-size: 18px;

font-weight: bold;

color: white;

border: none;

cursor: pointer;

background-color: #3498db;

border-radius: 5px;

transition: background-color 0.3s ease;

}

.generate-qr-code-btn:hover {

background-color: #2980b9;

}

.qr-container {

display: flex;

justify-content: center;

margin: 30px 0;

background-color: white;

padding: 20px;

border-radius: 10px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

.error-message-text {

font-size: 18px;

margin-bottom: 20px;

color: #e74c3c;

}

.download-btn {

padding: 10px 20px;

font-size: 16px;

background-color: #2ecc71;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

transition: background-color 0.3s ease;

display: none;

}

.download-btn:hover {

background-color: #27ae60;

}

@media (max-width: 480px) {

.qr-text {

width: 90%;

}

</style>

</head>

<body>

<h1>QR Code Generator</h1>

<button class="generate-qr-code-btn">Generate QR Code</button>

<button class="download-btn">Download QR Code</button>

integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA=="

crossorigin="anonymous"

referrerpolicy="no-referrer"></script>

const qrContainer = document.querySelector(".qr-container");

const qrTextInput = document.querySelector(".qr-text");

const generateQrCodeBtn = document.querySelector(".generate-qr-code-btn");

const errorMessageText = document.querySelector(".error-message-text");

const downloadBtn = document.querySelector(".download-btn");

let qrCode;

generateQrCodeBtn.addEventListener("click", () => {

validateInputField();

});

qrTextInput.addEventListener("keyup", (e) => {

if (e.key === "Enter") {

validateInputField();

}

});

function validateInputField() {

const inputValue = qrTextInput.value.trim();

if (inputValue.length > 0) {

generateQrCode(inputValue);

} else {

qrContainer.innerHTML = "";

errorMessageText.textContent = "Please enter text or URL to generate QR Code";

downloadBtn.style.display = "none";

}

function generateQrCode(inputValue) {

qrContainer.innerHTML = "";

errorMessageText.textContent = "";

qrCode = new QRCode(qrContainer, {

text: inputValue,

width: 256,

height: 256,

colorLight: "#ffffff",

colorDark: "#000000",

correctLevel: QRCode.CorrectLevel.H

});

downloadBtn.style.display = "inline-block";

// Add animation to QR code

qrContainer.firstChild.style.animation = "fadeIn 0.5s ease-out";

}

downloadBtn.addEventListener("click", () => {

if (qrCode) {

const qrCanvas = qrContainer.querySelector("canvas");

const qrImage = qrCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

let downloadLink = document.createElement("a");

downloadLink.href = qrImage;

downloadLink.download = "qrcode.png";

document.body.appendChild(downloadLink);

downloadLink.click();

document.body.removeChild(downloadLink);

}

});

// Add this CSS for the animation

const style = document.createElement('style');

style.textContent = `

@keyframes fadeIn {

from { opacity: 0; transform: scale(0.8); }

to { opacity: 1; transform: scale(1); }

}

`;

document.head.appendChild(style);

</script>

</body>

</html>