Nowadays every people uses QR code and QR code generator is very helpful for business and other properties. You can create a QR code generator app using HTML, CSS and JavaScript. However, in this article I will show you how can you create a QR code generator using simple HTML, CSS and JavaScript code. Also, you can publish the keyword code generator app with your Blogger and word WordPress website without any problem. There are so many benefits of QR code generators. I will tell you in a moment.
Let’s have a demo of QR code generator app :
In order to create a QR code generator app, you have to know some :
- Basic HTML.
- Basic CSS.
- Basic JavaScript.
In Header Section :
In Google Fonts, you can add any Google font using Google Font Library. We are using Poppin font because this is the most popular font around the world. And then you have to add a cloud CDN that uses for JavaScript QR code generate tool.
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>QR Code Generator</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet"></link>
<!--- QR Code CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>In HTML section :
HTML is the base of this qR code generator app. First of all, we create a div and there are some text placeholder where user can edit or write some text for generating QR code. Then we have some option for QR code size and QR code color selection. After that we have a generate button for generating QR code and also we have a download button for downloading QR code.
<div >
<input type="text" id="userInput" placeholder="Enter some text or URL" />
<div class="options">
<select class="sizeOptions">
<option value="100" selected>100 x 100</option>
<option value="200">200 x 200</option>
<option value="300">300 x 300</option>
</select>
<input type="color" id="BGColor" class="color-inp" />
<input type="color" id="FGColor" class="color-inp" />
</div>
<div class="box">
<button id="submit" disabled>Generate</button>
<a href="#" id="download">Download</a>
</div>
<div class="container"></div>
</div>In CSS section :
We are editing every style according to our preferences. However, you can edit your style just using simple CSS. In CSS section we designed every single element, That we are using in HTML. We designed button, Box, Color item, select option according to our preferences.
.wrapper {
background-color: #ffffff;
padding: 5em 4em;
position: absolute;
width: 31.25em;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.6em;
box-shadow: 0 1.5em 3em rgba(3, 21, 55, 0.3);
}
#userInput {
width: 100%;
border: none;
border-bottom: 2px solid #000000;
padding: 0.5em 1em;
font-size: 1em;
outline: none;
}
.options {
margin-top: 1em;
display: flex;
align-items: center;
justify-content: space-between;
}
select {
appearance: none;
width: 8em;
padding: 0.45em 0.9em;
font-size: 1.25em;
letter-spacing: 0.5px;
cursor: pointer;
background-color: #377dff;
border: none;
color: #ffffff;
background-image: url("arrow.png");
background-repeat: no-repeat;
background-size: 1.1em;
background-position: 6em;
outline: none;
border-radius: 0.3em;
}
select::-ms-expand {
display: none;
}
select option {
background-color: #ffffff;
color: #377dff;
letter-spacing: 0.06em;
font-weight: 400;
font-size: 1.12em;
}
.selected {
display: none;
}
.color-inp {
appearance: none;
background-color: transparent;
width: 3.1em;
height: 3.4em;
outline: none;
border: none;
}
.color-inp::-webkit-color-swatch {
border-radius: 0.3em;
border: 0.18em solid #191f3f;
}
.color-inp::-moz-color-swatch {
border-radius: 0.3em;
border: 0.18em solid #191f3f;
}
.box {
display: flex;
align-items: center;
justify-content: space-around;
}
.box button,
.box a {
font-size: 1em;
padding: 0.8em 2em;
border-radius: 0.5em;
margin-top: 2em;
}
.box button:disabled {
background-color: transparent;
color: #a3aab6;
border: 0.18em solid #a3aab6;
}
.box button {
background-color: transparent;
color: #377dff;
border: 0.18em solid #377dff;
}
.box a {
background-color: #377dff;
color: #ffffff;
text-decoration: none;
border: 0.18em solid #377dff;
}
.container {
display: flex;
justify-content: center;
margin-top: 1.8em;
}
.hide {
display: none;
}
In javaScript section:
Here we are creating some function for generating QR code and also generating a function for working with download and generate button. However, We are using very simple JavaScript function that everyone can understand. We will give you sample demo. You can change any code for your preferences.
const container = document.querySelector(".container");
const userInput = document.getElementById("userInput");
const submitBtn = document.getElementById("submit");
const downloadBtn = document.getElementById("download");
const sizeOptions = document.querySelector(".sizeOptions");
const BGColor = document.getElementById("BGColor");
const FGColor = document.getElementById("FGColor");
let QR_Code;
let sizeChoice, BGColorChoice, FGColorChoice;
//Set size
sizeOptions.addEventListener("change", () => {
sizeChoice = sizeOptions.value;
});
//Set background color
BGColor.addEventListener("input", () => {
BGColorChoice = BGColor.value;
});
//Set foreground color
FGColor.addEventListener("input", () => {
FGColorChoice = FGColor.value;
});
//Format input
const inputFormatter = (value) => {
value = value.replace(/[^a-z0-9A-Z]+/g, "");
return value;
};
submitBtn.addEventListener("click", async () => {
container.innerHTML = "";
//QR code genertion
QR_Code = await new QRCode(container, {
text: userInput.value,
width: sizeChoice,
height: sizeChoice,
colorDark: FGColorChoice,
colorLight: BGColorChoice,
});
//Set url for download
const src = container.firstChild.toDataURL("image/pmg");
downloadBtn.href = src;
let userValue = userInput.value;
try {
userValue = new URL(userValue).hostname;
} catch (_) {
userValue = inputFormatter(userValue);
downloadBtn.download = `${userValue}QR`;
downloadBtn.classList.remove("hide");
}
});
userInput.addEventListener("input", () => {
if (userInput.value.trim().length < 1) {
submitBtn.disabled = true;
downloadBtn.href = "";
downloadBtn.classList.add("hide");
} else {
submitBtn.disabled = false;
}
});
window.onload = () => {
container.innerHTML = "";
sizeChoice = 100;
sizeOptions.value = 100;
userInput.value = "";
BGColor.vavlue = BGColorChoice = "#ffffff";
FGColor.value = FGColorChoice = "#377dff";
downloadBtn.classList.add("hide");
submitBtn.disabled = true;
};
Setup Blogger QR code generator app :
- Create a base <html> <head> Head section is here </head> <style> Css Code Here </style> <body> HTML Code Here
- Then Create Main <script> JavaScript Code Here </script>
- Then Close body and HTML </body>
It’s a internal HTML CSS and JavaScript code for working in blogger. So be careful when you edit and organize the code.
Setup wordPress QR code generator app :
It’s very simple. Just copy all the code. Internal style and JavaScript. like Main <html> <style> Css Code Here </style> <body> HTML Code Here <script> JavaScript Code Here </script> </body> . You can create a A robots txt generator in same method.
Video Guide for Blogger :
In this video we will learn about how to “Create a QR Code Generator APP”.
-
Why QR code generator are used for ?
Nowadays every people uses QR code and QR code generator is very helpful for business and other properties.
-
How to create a QR code Generator ?
You can create a QR code generator app using HTML, CSS, JavaScript. We will provide all the code in this article.
-
When do we use QR code generator ?
We can create use QR code with our business and more.