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 QR code generator app on CodePen. 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. This app was generated by ChatGPT using prompts by netsi1964. If you have any questions or comments, feel free to contact me on Twitter. Cover image by Midjourney.
Top comments (0)