Qr Code generator

Code

<!DOCTYPE html>

<head>

<title>QR Code Generator</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 0;

}

.container {

width: 80%;

max-width: 600px;

margin: 0 auto;

background-color: #ffffff;

padding: 30px;

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

margin-top: 50px;

text-align: center;

}

h1 {

color: #333;

}

input[type="text"] {

width: 80%;

padding: 12px;

font-size: 1em;

margin: 20px 0;

border: 1px solid #ccc;

border-radius: 4px;

}

button {

padding: 12px 20px;

font-size: 1.1em;

background-color: #28a745;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

}

button:hover {

background-color: #218838;

}

#qrcode {

margin-top: 20px;

}

</style>

</head>

<body>

<h1>QR Code Generator</h1>

<p>Enter the text or URL below to generate a QR code:</p>

<button onclick="generateQRCode()">Generate QR Code</button>

</div>

function generateQRCode() {

var text = document.getElementById("text-input").value;

if (text.trim() === "") {

alert("Please enter some text or a URL.");

return;

}

// Clear any previous QR code

document.getElementById("qrcode").innerHTML = "";

// Generate the QR Code

var qrcode = new QRCode(document.getElementById("qrcode"), {

text: text,

width: 128,

height: 128,

colorDark : "#000000",

colorLight : "#ffffff",

correctLevel : QRCode.CorrectLevel.H

});

}

</script>

</body>

</html>