Hello there, today’s article will teach you how to make a QR Code Generator with HTML, CSS, and JavaScript. I already discussed how to develop a Random Quote Generator in JavaScript, and now it’s time to create a QR Code Generator in JavaScript.
QR (Quick Response) codes may store a large amount of data, and users can instantly access it by scanning the QR code. Users may enter a text or URL into my QR Code Generator software to produce a QR code for it. It is a QR code creator app, not a scanner app.
Table of Contents
QR Code Generator -Enter text or website below
QR Code Generator
Video Tutorial of QR Code Generator
You saw a demo of a QR code generator and how I made it using HTML, CSS, and JavaScript in the video above. As you can see, I utilized the preserver API to produce a QR code from user inputs. So, even if you’re a newbie, I believe you understand the codes and principles behind developing this QR app.
If you liked our QR code generator and want to acquire the source codes or files, you may do so at the bottom of this page.
But, if you’re a newbie, I recommend watching the above video two or three times and attempting to construct it yourself because I’ve explained each JavaScript line with written comments in the video.
You might like this:
- Interview-question
- How To Create a Parallax Scrolling Effect
- How to Build Library Management System Using HTML, CSS, and JavaScript (Source Code) Just 3 Simple Steps!
- Build a Quiz Application with HTML, CSS, and JavaScript, Free Source Code
QR Code Generator in JavaScript [Source Codes]
In JavaScript, develop a QR Code Generator. First, you must generate three files: HTML, CSS, and JavaScript. Simply copy and paste the supplied codes into your file after you’ve created these files. You can also obtain the source code files for this QR Code Generator App by clicking the download button below.
First, create an HTML file called index.html and put the following codes into it. Remember to save the file with the.html extension.
Step 1: Set Up Your HTML Structure
Start by creating a basic HTML structure for your QR code generator. This will include the input field, a “Generate QR Code” button, a div for displaying the QR code, and the “Download” button (initially hidden). You can also include any other HTML elements or styling you prefer.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Add the necessary meta tags, title, and CSS links -->
</head>
<body>
<div class="qr-container">
<h1 class="qr-heading">QR Code Generator</h1>
<label for="text" class="qr-label">Enter text or URL:</label>
<input type="text" id="text" class="qr-input">
<button id="generate" class="qr-button">Generate QR Code</button>
<div id="qrcode" class="qr-code"></div>
<a id="downloadLink" class="qr-download" style="display: none;" download="qrcode.png">Download QR Code</a>
</div>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="script.js"></script>
</body>
</html>Step 2: Add CSS Styles
Define your CSS styles to format and style the various elements within your QR code generator. Customize the styles to match your design preferences.
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.qr-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.qr-heading {
text-align: center;
}
.qr-label {
display: block;
margin-top: 10px;
}
.qr-input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.qr-button {
width: 100%;
padding: 10px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.qr-button:hover {
background-color: #0056b3;
}
.qr-code {
text-align: center;
margin-top: 20px;
}
.qr-download {
display: block;
text-align: center;
margin-top: 20px;
text-decoration: none;
background-color: #007BFF;
color: #fff;
padding: 10px;
border-radius: 5px;
}
.qr-download:hover {
background-color: #0056b3;
}Step 3: Include JavaScript Libraries
In the HTML file, include the JavaScript libraries required for generating QR codes. You can use the QRCode library, which is a JavaScript QR code generator.
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="script.js"></script>Step 4: Create JavaScript Functionality (script.js)
Write JavaScript code to handle user interactions and generate the QR code. This script will also control the visibility of the “Download” button.
document.addEventListener("DOMContentLoaded", function() {
const generateButton = document.getElementById("generate");
const textInput = document.getElementById("text");
const qrcodeDiv = document.getElementById("qrcode");
const downloadLink = document.getElementById("downloadLink");
generateButton.addEventListener("click", function() {
const text = textInput.value;
if (text) {
qrcodeDiv.innerHTML = ""; // Clear previous QR code
const qrcode = new QRCode(qrcodeDiv, text);
// Convert the QR code to an image
const qrCodeImage = qrcodeDiv.querySelector("img");
// Show the Download button and set its href to the QR code image
downloadLink.style.display = "block";
downloadLink.href = qrCodeImage.src;
}
});
});This JavaScript code listens for a click on the “Generate QR Code” button, generates the QR code based on the user input, displays the QR code, and makes the “Download” button visible with a download link to the generated QR code.
Download Complete Free Code –
