Create a Dynamic QR Code Generator with HTML5 and CSS3

Are you fascinated by how QR codes have become an essential part of our digital lives, From restaurant menus to event tickets, QR codes are everywhere! Today, I’ll show you how to create a functional and visually appealing QR code generator using HTML5 and CSS3. We’ll also enhance it with practical functionality to make it more dynamic and useful. Let’s dive right in!

Setting Up the Project

First, we’ll set up a simple HTML5 structure and basic CSS3 styling to create the layout for our QR code project.

HTML Code:

<!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>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>QR Code Generator</h1>
    <input type="text" id="text-input" placeholder="Enter text or URL" />
    <button id="generate-btn">Generate QR Code</button>
    <div class="qr-code" id="qr-code-container"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS Code:

/* styles.css */
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: #f3f4f6;
}

.container {
  text-align: center;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

input {
  padding: 10px;
  width: 80%;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}

.qr-code {
  margin-top: 20px;
}

This code sets up a basic structure and a simple design for our QR code generator. Now, let’s move to the dynamic part of generating QR codes.

Adding Dynamic QR Code Generation with JavaScript

We’ll use a JavaScript library called QRCode.js to generate QR codes dynamically.

JavaScript Code:

// script.js

// Importing the QRCode.js library (add this script in your HTML file or use a CDN)
// <script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>

document.getElementById("generate-btn").addEventListener("click", () => {
  const textInput = document.getElementById("text-input").value;
  const qrCodeContainer = document.getElementById("qr-code-container");

  // Clear any existing QR code
  qrCodeContainer.innerHTML = "";

  if (textInput.trim() === "") {
    alert("Please enter text or a URL to generate the QR Code.");
    return;
  }

  // Generate QR Code
  QRCode.toCanvas(qrCodeContainer, textInput, {
    width: 200,
    margin: 2,
    color: {
      dark: "#000000", // QR Code color
      light: "#ffffff", // Background color
    },
  }, (error) => {
    if (error) {
      console.error(error);
      alert("Failed to generate QR Code.");
    }
  });
});

Adding Features

Let’s take this project up a notch by adding some practical features:

Download QR Code: Allow users to download the generated QR code as an image.
Styling Options: Let users choose the size and color of their QR code.
Responsive Design: Make the application mobile-friendly.

Enhance HTML:

<div class="options">
  <label for="qr-size">Size:</label>
  <select id="qr-size">
    <option value="200">200x200</option>
    <option value="300">300x300</option>
    <option value="400">400x400</option>
  </select>

  <label for="qr-color">Color:</label>
  <input type="color" id="qr-color" value="#000000" />

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

Enhance JavaScript:

const downloadBtn = document.getElementById("download-btn");
const qrSize = document.getElementById("qr-size");
const qrColor = document.getElementById("qr-color");

// Generate QR Code with customizable options
document.getElementById("generate-btn").addEventListener("click", () => {
  const textInput = document.getElementById("text-input").value;
  const qrCodeContainer = document.getElementById("qr-code-container");
  const size = parseInt(qrSize.value);
  const color = qrColor.value;

  qrCodeContainer.innerHTML = "";

  if (textInput.trim() === "") {
    alert("Please enter text or a URL to generate the QR Code.");
    return;
  }

  // Generate QR Code
  QRCode.toCanvas(qrCodeContainer, textInput, {
    width: size,
    color: {
      dark: color,
      light: "#ffffff",
    },
  });
});

// Download QR Code
const downloadQRCode = () => {
  const canvas = qrCodeContainer.querySelector("canvas");
  if (canvas) {
    const link = document.createElement("a");
    link.href = canvas.toDataURL();
    link.download = "qr-code.png";
    link.click();
  } else {
    alert("Generate a QR Code first!");
  }
};

downloadBtn.addEventListener("click", downloadQRCode);

Final Touches

With the above enhancements, we now have a QR code generator that:

Generates QR codes based on user input.
Offers customization for size and color.
Provides an option to download the QR code as an image.

Responsive CSS:

@media (max-width: 600px) {
  .container {
    width: 90%;
  }

  input {
    width: 100%;
  }
}

Conclusion

With just HTML5, CSS3, and a bit of JavaScript, we’ve created a dynamic QR code generator that is both functional and user-friendly. Whether you want to use it for a personal project or integrate it into a larger application, this code is a great starting point.