Generate QR Codes with JavaScript and Tailwind CSS
Tags: qr, chatgpt, javascript, tailwindcss
Published: 2023-05-02 15:22:45

---
title: Generate QR Codes with JavaScript and Tailwind CSS
published: true
description: 
tags: qr,chatgpt,javascript,tailwind
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdm3bqr8d7owmxxypafz.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-05-02 15:09 +0000
---

## TL;DR

> In this tutorial, we'll show you how to create a web app that generates QR codes from user-entered URLs. The app is built with JavaScript and Tailwind CSS, and includes features like a live preview of the QR code, the ability to download the QR code image, and dynamic file naming based on the entered URL. You can check out a demo of the app on CodePen.

## Introduction

QR codes are a type of matrix barcode that can be used to store information in a small, square pattern. They're often used to encode URLs, which can be scanned by mobile devices to quickly navigate to a webpage.

In this tutorial, we'll walk through the process of creating a web app that generates QR codes from user-entered URLs. The app will be built with JavaScript and Tailwind CSS, and will include features like a live preview of the QR code, the ability to download the QR code image, and dynamic file naming based on the entered URL.

## Code Demo

You can check out a working demo of the <a href=“ https://codepen.io/netsi1964/pen/OJBxBMP”>QR code generator app on CodePen</a>. The app is built with HTML, CSS, and JavaScript, and uses the Google Charts API to generate the QR code images.

### HTML
```
<!DOCTYPE html>
<html>
<head>
  <title>QR Code Generator</title>
  <link rel="stylesheet" href="https://unpkg.com/tailwindcss@latest/dist/tailwind.min.css">
</head>
<body>
  <div class="bg-gray-100 flex justify-center items-center h-screen">
    <div class="shadow-md rounded-lg bg-white p-4">
      <h1 class="text-2xl font-bold mb-2">QR Code Generator</h1>
      <label for="url" class="text-lg font-medium mb-2 block">Enter URL:</label>
      <input type="text" id="url" name="url" value="https://dr.dk" class="w-full p-2 border border-gray-400 rounded-md mb-2">
      <div class="flex justify-center items-center mb-4">
        <img id="qr-code" src="https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=https%3A%2F%2Fdr.dk" alt="QR code">
        <canvas id="qr-canvas" width="200" height="200" class="ml-4"></canvas>
      </div>
      <button id="download-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-4">
        Download QR code
      </button>
      <div class="text-center">
        <p class="text-gray-500 text-sm">Scan the QR code to visit the website</p>
      </div>
    </div>
  </div>
</body>
</html>
```

### CSS
```

}

/* Center container */
.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

/* Add margin between QR code image and canvas */
.mb-4 {
  margin-bottom: 1rem;
}
```

### Javascript
```

// Get DOM elements
const inputField = document.getElementById('url');
const qrCode = document.getElementById('qr-code');
const qrCanvas = document.getElementById('qr-canvas');
const downloadButton = document.getElementById('download-button');

// Listen for changes to the URL field
inputField.addEventListener('input', function() {
  // Generate QR code image URL
  const url = inputField.value.trim();
  const qrCodeUrl = `https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=${encodeURIComponent(url)}`;

  // Update QR code image and canvas
  qrCode.src = qrCodeUrl;
  const ctx = qrCanvas.getContext('2d');
  const img = new Image();
  img.src = qrCodeUrl;
  img.addEventListener('load', function() {
    ctx.drawImage(img, 0, 0, 200, 200);
  });
});

// Listen for download button click
downloadButton.addEventListener('click', function() {
  const url = inputField.value.trim();
  const filename = `QR_${url.replace(/[\W_]+/g, "_")}.png`;

  const downloadLink = document.createElement('a');
  downloadLink.setAttribute('download', filename);
  qrCanvas.toBlob(function(blob) {
    const url = URL.createObjectURL(blob);
    downloadLink.setAttribute('href', url);
    downloadLink.click();
  });
});


```


## Conclusion

In this tutorial, we've shown you how to create a web app that generates QR codes from user-entered URLs. The app is built with JavaScript and Tailwind CSS, and includes features like a live preview of the QR code, the ability to download the QR code image, and dynamic file naming based on the entered URL.

You can check out a [demo of the app on CodePen](https://codepen.io/netsi1964/pen/OJBxBMP). This app was generated by ChatGPT using prompts by <a href=“https://twitter.com/netsi1964”>netsi1964</a>. If you have any questions or comments, feel free to contact me on Twitter. Cover image by Midjourney.