QR Code Generator

QR Code Generator

1. မိမိ blog site ကို account အရင်ဝင်ပါ
2. dashboard ထဲက Pages(or)Posts ကိုနှိပ်
3. + အိုင်ကွန်ကိုနှိပ်
4. 🖍️ အိုင်ကွန်ကိုနှိပ်၍ < > HTML view ကိုရွေးချယ်၍နှိပ်ပါ
5. အောက်က code ကို copy ယူပြီးကူးထည့်ပေးပါ
6. save ကိုနှိပ်ပြီးပါပြီ

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

box {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: white;
  padding: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  width: 100%;
  max-width: 100%;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
}

button:hover {
  background-color: #45a049;
}

.qrcode-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.qrcode {
  width: 300px;
  height: 300px;
}

.download-btn {
  margin-top: 20px;
  background-color: #007BFF;
}

.download-btn:hover {
  background-color: #0056b3;
}
</style>
  <div class="container">
    
    <input type="text" class="qrcode-message" placeholder="Enter text for QR code" />
    <button class="generate-btn">Generate QR Code</button>

    <div class="qrcode-container">
      <div class="qrcode"></div>
    </div>

    <button class="download-btn" style="display:none;">Download QR Code</button>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script>
let message = "Write something in the text field and click on Generate QR Code button.";
const QRCodeImage = document.querySelector(".qrcode");
const QRCodeMessage = document.querySelector(".qrcode-message");
const generateBtn = document.querySelector(".generate-btn");
const downloadBtn = document.querySelector(".download-btn");

let qrcode = new QRCode(QRCodeImage, {
  text: message,
  width: 300,
  height: 300,
  colorDark: "#001219",
  colorLight: "#ffffff",
});

const generateQRCode = (message) => {
  qrcode.clear(); // Clear the previous QR Code
  qrcode.makeCode(message); // Generate a new QR Code based on the message
};

generateBtn.addEventListener("click", () => {
  message = QRCodeMessage.value;
  if (message.trim() === "") {
    alert("Please enter some text to generate the QR code.");
    return;
  }
  generateQRCode(message);
  downloadBtn.style.display = 'inline-block'; // Show the download button after QR Code is generated
});

// Download the QR code as an image
downloadBtn.addEventListener("click", () => {
  const qrCanvas = QRCodeImage.querySelector("canvas"); // Get the canvas element containing the QR code
  if (qrCanvas) {
    const dataUrl = qrCanvas.toDataURL("image/png"); // Convert the canvas content to a data URL
    const link = document.createElement("a"); // Create a temporary download link
    link.href = dataUrl;
    link.download = "qrcode.png"; // Set the default filename for the downloaded QR code image
    link.click(); // Trigger the download
  } else {
    alert("No QR code generated to download.");
  }
});
</script>