Easily Create a QR Code Generator in Just 6 Simple Steps with HTML, CSS, and JavaScript

CodeKingdom
6 min readJan 28, 2023

--

Learn how to make a QR code generator using Html, Css and Javascript in just 6 simple steps and deploy it on firebase

Step 1:

Create a new folder called QR code generator anywhere in your system and open it inside your code editor

Step 2:

Create 3 files named accordingly: index.html, style.css and script.js

Your folder structure should look like this:

Folder Structure

Step 3:

Inside the index.html, let’s generate a boiler plate code and add reference to the scripts that we created:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code generator</title>
</head>
<body>

<script src="script.js"></script>
</body>
</html>

Step 4:

Now, Let’s write the code for index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>QR Code generator</title>
</head>
<body>
<div id="container">
<div id="inputs">
<label for="text-input">Enter text:</label>
<input type="text" id="text-input" placeholder="Enter text">
<br>
<label for="link-input">Enter link:</label>
<input type="text" id="link-input" placeholder="Enter link">
</div>
<button id="generate-button">Generate QR Code</button>
<div id="qrcode"></div>

<div id="qr-code-container" style="display:none;">
<img id="qr-code" alt="QR Code">
<button id="download-button" style="display: none;" onclick="downloadQRCode()">Download QR Code</button>
</div>

</div>

<script src="script.js"></script>
</body>
</html>

Step 5:

Now, Let’s make the app work and generate QR code:

Inside the script.js file, write:

const generateButton = document.getElementById("generate-button");
const textInput = document.getElementById("text-input");
const linkInput = document.getElementById("link-input");
const qrCode = document.getElementById("qr-code");

generateButton.addEventListener("click", function() {
let input;
if(textInput.value) {
input = textInput.value;
} else if(linkInput.value) {
input = linkInput.value;
}
const qrUrl = "https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=" + input;
qrCode.src = qrUrl;
});

qrCode.addEventListener("click", function() {
if(linkInput.value) {
window.open(linkInput.value, '_blank');
}
});
const qrCodeContainer = document.getElementById("qr-code-container");

generateButton.addEventListener("click", function() {
// Code to generate QR code
qrCodeContainer.style.display = "block";
downloadButton.style.display = "block";
document.getElementById("qrcode").style.opacity = "1";
document.getElementById("download-button").style.opacity = "1";

document.getElementById("qrcode").classList.add("fade-in");
document.getElementById("download-button").classList.add("fade-in");
});

const downloadButton = document.getElementById('download-button');


function downloadQRCode() {
// Get the QR code element
var qrcode = document.getElementById("qrcode");
var imgData = qrcode.src;
// Creates a link and triggers download
var link = document.createElement("a");
link.href = imgData;
link.download = "qrcode.png";
link.click();
}

Till now you should have a working app which can generate QR codes.

Your app should look like this:

Step 6:

Let’s add some styling to our app and make it look more visually appealing:

Inside the style.css, we’ll write:

body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}

#container {
width: 600px;
margin: 50px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px #ccc;
text-align: center;
}

#inputs {
margin-bottom: 20px;
}

label {
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
}

input {
padding: 10px;
font-size: 18px;
border-radius: 5px;
border: 1px solid #ccc;
width: 60%;
margin-bottom: 10px;
}

#download-button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px auto;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
transition: all 0.3s ease;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

#download-button:hover {
background-color: #4CAF50;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}

#generate-button:hover {
background-color: #4CAF50;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}

#download-button:active {
background-color: #3e8e41;
transform: scale(0.95);
}

#generate-button:active {
background-color: #3e8e41;
transform: scale(0.95);
}

#generate-button {
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
margin-bottom: 20px;
}

#container {
background: linear-gradient(to right, #f0f0f0, #d9d9d9);
box-shadow: 2px 2px 10px #ccc;
border-radius: 10px;
padding: 20px;
text-align: center;
}

#generate-button {
background: linear-gradient(to right, #4CAF50, #3e8e41);
box-shadow: 2px 2px 5px #666;
border-radius: 10px;
}


#generate-button:hover {
background-color: #3e8e41;
}

#qr-code-container {
display: inline-block;
background-color: #f0f0f0;
padding: 20px;
border-radius: 10px;
}

#qr-code {
max-width: 100%;
height: auto;
border-radius: 10px;
animation: fadeIn 0.5s ease-in;
}

#download-button {
animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

So, Now we should have a complete QR code scanner made with Html, Css and Javascript and it should look like this:

Here is all of the code of index.html, style.css and script.js:

  1. index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>QR Code Gennerator</title>
</head>
<body>
<div id="container">
<div id="inputs">
<label for="text-input">Enter text:</label>
<input type="text" id="text-input" placeholder="Enter text">
<br>
<label for="link-input">Enter link:</label>
<input type="text" id="link-input" placeholder="Enter link">
</div>
<button id="generate-button">Generate QR Code</button>
<div id="qrcode"></div>

<div id="qr-code-container" style="display:none;">
<img id="qr-code" alt="QR Code">
<button id="download-button" style="display: none;" onclick="downloadQRCode()">Download QR Code</button>
</div>

</div>

<script src="script.js"></script>
</body>
</html>

2. style.css:

body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}

#container {
width: 600px;
margin: 50px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px #ccc;
text-align: center;
}

#inputs {
margin-bottom: 20px;
}

label {
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
}

input {
padding: 10px;
font-size: 18px;
border-radius: 5px;
border: 1px solid #ccc;
width: 60%;
margin-bottom: 10px;
}

#download-button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px auto;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
transition: all 0.3s ease;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

#download-button:hover {
background-color: #4CAF50;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}

#generate-button:hover {
background-color: #4CAF50;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}

#download-button:active {
background-color: #3e8e41;
transform: scale(0.95);
}

#generate-button:active {
background-color: #3e8e41;
transform: scale(0.95);
}

#generate-button {
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
margin-bottom: 20px;
}

#container {
background: linear-gradient(to right, #f0f0f0, #d9d9d9);
box-shadow: 2px 2px 10px #ccc;
border-radius: 10px;
padding: 20px;
text-align: center;
}

#generate-button {
background: linear-gradient(to right, #4CAF50, #3e8e41);
box-shadow: 2px 2px 5px #666;
border-radius: 10px;
}


#generate-button:hover {
background-color: #3e8e41;
}

#qr-code-container {
display: inline-block;
background-color: #f0f0f0;
padding: 20px;
border-radius: 10px;
}

#qr-code {
max-width: 100%;
height: auto;
border-radius: 10px;
animation: fadeIn 0.5s ease-in;
}

#download-button {
animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

3. script.js:

const generateButton = document.getElementById("generate-button");
const textInput = document.getElementById("text-input");
const linkInput = document.getElementById("link-input");
const qrCode = document.getElementById("qr-code");

generateButton.addEventListener("click", function() {
let input;
if(textInput.value) {
input = textInput.value;
} else if(linkInput.value) {
input = linkInput.value;
}
const qrUrl = "https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=" + input;
qrCode.src = qrUrl;
});

qrCode.addEventListener("click", function() {
if(linkInput.value) {
window.open(linkInput.value, '_blank');
}
});
const qrCodeContainer = document.getElementById("qr-code-container");

generateButton.addEventListener("click", function() {
// Code to generate QR code
qrCodeContainer.style.display = "block";
downloadButton.style.display = "block";
document.getElementById("qrcode").style.opacity = "1";
document.getElementById("download-button").style.opacity = "1";

document.getElementById("qrcode").classList.add("fade-in");
document.getElementById("download-button").classList.add("fade-in");
});

const downloadButton = document.getElementById('download-button');

function downloadQRCode() {
// Get the QR code element
var qrcode = document.getElementById("qrcode");
var imgData = qrcode.src;
// Creates a link and triggers download
var link = document.createElement("a");
link.href = imgData;
link.download = "qrcode.png";
link.click();
}

You can download the code from my Github:

Also do check my other blogs:

How to make an AI assistant in Python: https://medium.com/@codekingdom/ai-assistant-in-python-7931b6edc567

--

--

CodeKingdom
CodeKingdom

Written by CodeKingdom

I'm Zeyan Ramzan, a programmer sharing tutorials & tips on coding. Join me in demystifying the world of programming & improving our skills together.

No responses yet