Dynamic QR Code Generator with JavaScript

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!

Gift Egbonyi @giftintech