QR Code Generator using HTML, CSS and jQuery

Last Updated : 23 Oct, 2026

A QR code generator converts text, URLs, and other supported data into a scannable Quick Response (QR) code. HTML structures the interface, CSS styles it, and jQuery handles user interactions, while QRCode.js generates the QR code in the browser.

  • Users enter the content they want to encode and click a button to generate a QR code.
  • The generated code can be scanned using a compatible QR-code reader.
  • A JavaScript library avoids relying on the discontinued Google Charts QR-code endpoint.

Approach

  • Create an HTML page containing a text input, a Generate button, and a container for the QR code.
  • Use CSS to style the input, button, and output area.
  • Use jQuery to read the entered content, handle button clicks, and display validation messages.
  • Use QRCode.js to generate the QR code directly in the browser.

Example: QR Code Generator using HTML, CSS and jQuery

The following example uses QRCode.js to generate a QR code for the text entered by the user. Save the code in a file named index.html and open it in a browser with an internet connection to load the required libraries.

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QR Code Generator</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 30px 15px;
      background: #f4f6f8;
    }

    .container {
      max-width: 450px;
      margin: 0 auto;
      padding: 25px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    h1 {
      font-size: 24px;
      margin-bottom: 20px;
    }

    input {
      box-sizing: border-box;
      width: 100%;
      padding: 12px;
      margin-bottom: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    button {
      padding: 10px 18px;
      border: none;
      border-radius: 4px;
      background: #1769aa;
      color: white;
      cursor: pointer;
    }

    button:hover {
      background: #12558a;
    }

    #qrcode {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      overflow-wrap: anywhere;
    }

    #qrcode img,
    #qrcode canvas {
      max-width: 100%;
      height: auto;
    }

    #message {
      margin-top: 12px;
      color: #b00020;
    }
  </style>
</head>

<body>
  <main class="container">
    <h1>QR Code Generator</h1>

    <label for="content">Enter text or a URL:</label>
    <input
      type="text"
      id="content"
      placeholder="Enter content"
    >

    <button type="button" id="generate">
      Generate QR Code
    </button>

    <p id="message" role="status" aria-live="polite"></p>

    <div
      id="qrcode"
      role="img"
      aria-label="Generated QR code"
    ></div>
  </main>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

  <script>
    $(function () {
      const qrContainer = document.getElementById("qrcode");

      $("#generate").on("click", function () {
        const content = $("#content").val().trim();
        $("#message").text("");
        qrContainer.replaceChildren();

        if (!content) {
          $("#message").text(
            "Please enter text or a URL."
          );
          $("#content").trigger("focus");
          return;
        }

        try {
          new QRCode(qrContainer, {
            text: content,
            width: 180,
            height: 180,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.M
          });
        } catch (error) {
          $("#message").text(
            "Unable to generate the QR code. Please try different content."
          );
        }
      });
    });
  </script>
</body>
</html>

Output:

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document. It is widely famous for its philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.

Comment

Explore