Dynamic QR Code Generator with JavaScript

#qrcode #frontend #javascript #html

It’s Wednesday again, and I’m back with another quick tutorial... even though nobody asked me to last week (make sure you've read my last post: 'How to Add a QR Code to Your Website with Just a Few Lines of Code' for context) 😅.

I said I’d follow up with a more interactive version of the QR code generator, so here we are!

Today, we’re letting users type in a link and generate a QR code at the click of a button. No backend needed. Let’s get into it.

Tools We'll Use:

HTML (for the form and QR container)
CSS (for some simple styling)
JavaScript (to handle the QR generation)
qrcodejs via CDN

Step 1: Basic HTML

<div class="card">
  <h1>QR Code Generator</h1>
  <input type="url" id="url-input" placeholder="Enter a URL" />
  <button id="generate-btn">Generate QR Code</button>
  <div id="qrcode"></div>
</div>

<!-- QRCode.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>

Step 2: Style It with CSS (Optional)

This part is totally up to you. Feel free to tweak the styles to match your brand or website. Here's a simple clean layout to get you started:

body {
  font-family: sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.card {
  background: #fff;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 320px;
}

input[type="url"] {
  padding: 0.5rem;
  width: 100%;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
}

button {
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 5px;
  background-color: #333;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #331331;
  font-weight: bold;
}

#qrcode {
  margin-top: 1rem;
}

Step 3: Add the JavaScript

This script listens for a button click, grabs the input value, and generates a QR code using the QRCode class from the library.

const input = document.getElementById('url-input');
const button = document.getElementById('generate-btn');
const qrCodeContainer = document.getElementById('qrcode');

function isValidURL(string) {
  try {
    new URL(string);
    return true;
  } catch (_) {
    return false;
  }
}

button.addEventListener('click', () => {
  const url = input.value.trim();

  if (!url || !isValidURL(url)) {
    alert('Please enter a valid URL');
    return;
  }

  // Clear previous QR code
  qrCodeContainer.innerHTML = '';

  qrcode = new QRCode(qrCodeContainer, {
    text: url,
    width: 128,
    height: 128,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
  });
});

Final Result

Now users can type a URL (the input only accepts valid URLs), hit "Generate", and get a scannable QR code instantly. It works on mobile too!
See a live demo in this Codepen

Over to You

That’s it for today’s midweek mini tutorial!

I’m keeping things light, fun and useful; one small project at a time.

If you enjoyed this, leave a 💬 or 🧡 to let me know.

And if you’ve got an idea for something you'd like me to try out next Wednesday, drop it in the comments. 👇

Follow me to see more straight-forward and short tutorials like this :)

If you are curious about what I do, check out my Portfolio

:-)

Web trails
You can also find me here on LinkedIn
or here X (Twitter)

Let’s keep learning together!