Table of Contents
Introduction
HTML is a standard markup language. Web Developers use this to design attractive and Interactive web pages. This language is very popular among the Web Developers. In the present time, people make websites for almost all kinds of businesses. Maximum number of websites use HTML as base language.
JavaScript is a Client Side Scripting Language. Developers use this scripting language to create interactive and dynamic web pages. JavaScript turn the normal web pages into dynamic web pages. It makes the web pages working.
QR Codes are very popular among the people around the world. QR stands for Quick Response. We need to use QR codes for various purposes like online payment, verification, URL sharing etc. We may show QR codes in our own websites also. It can create a easier interface for the visitors of your website. It can be done very easily by using an API (Application Programming Interface). I am using the API of qrserver.com. Click here to visit the API website.
QR Code Generator in HTML
Here in this tutorial, I am making a simple QR Code Generator in HTML by using JavaScript. In this application, text can be entered in an input text box and that text will get converted into a QR code in only one and within a fraction of second. It is very easy to develop and code is also very easy. QR code generator can be very useful for your website.
QR Code Generator Requirements
I am creating this QR code generator in HTML. For styling purpose, CSS (Cascading Style Sheet) is being used. I am creating a simple styling with CSS to give the application a beautiful look. As client scripting language, I am using JavaScript. JavaScript will turn it into a working application.
QR Code Generator Developing Method
At first, I will create an HTML page with a heading, a div to show the QR code, a text box to enter the data of the QR code and a button to create the QR code. On clicking the button, the QR code will be created. I will show the QR code as the background of the div. In this way, visitors will unable to copy the code. The HTML code is given below –
<!DOCTYPE html> <html> <head> <title>QR Code Generator</title> </head> <body> <center> <h2>QR Code Generator</h2> <div class="qr-code"> <span>QR Code Generator</span> </div> <p><input type="text" name="date" placeholder="Type Your Text" class="textbox"> <p><button class="btn" onclick="generateFun()">Click to Generate</button> </center> </body> </html>
I have used some simple CSS codes to give a beautiful look to the web application. The CSS codes that I have used is given below –
<style type="text/css">
.qr-code{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
border: 1px solid #888;
font-size: 14px;
}
.textbox{
width: 200px;
height: 30px;
color: #000;
background: #fff;
outline: none;
border: 1px solid #888;
border-radius: 5px;
font-size: 14px;
padding-left: 5px;
}
.btn{
width: 200px;
height: 30px;
outline: none;
border: 0;
background: #a01350;
cursor: pointer;
color: #fff;
}
.btn:active{
background: #490b25;
}
</style>
The HTML page will look like this –
I have entered a function naming generateFun() in the onclick listener of the button. On clicking the button, QR code will generate. The text entered in the text box will act as the data of the QR code. In the input text box, anything like a numeric code, an URL or a simple text can be entered. The text of that text box will get converted into a QR code on the clicking of the button.
Now, the time to create the function generateFun(). The function should be created withing the <script> and </script> tags. The <script> tag can be entered within <head> and </head> tags. The JavaScript code can be written as below –
<script type="text/javascript">
function generateFun(){
var data = document.getElementsByClassName("textbox")[0].value;
if(data != ""){
var url = "https://api.qrserver.com/v1/create-qr-code/?size=1000x1000&data=" + data;
document.getElementsByClassName("qr-code")[0].style.backgroundImage = "url(" + url + ")";
document.getElementsByClassName("qr-code")[0].style.backgroundSize = "100% 100%";
document.getElementsByClassName("qr-code")[0].innerHTML = "";
document.getElementsByClassName("qr-code")[0].style.border = "0";
}else{
return false;
}
}
</script>
That’s all. Now the web application is ready to generate QR code from a text entered into the given text box. After, generating a QR code, the web page will look like this –
You can scan the above QR code with your smart phone or anything to verify the result. The output will look like this.
The overall HTML code is given below –
<!DOCTYPE html>
<html>
<head>
<title>QR Code Generator</title>
<style type="text/css">
.qr-code{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
border: 1px solid #888;
font-size: 14px;
}
.textbox{
width: 200px;
height: 30px;
color: #000;
background: #fff;
outline: none;
border: 1px solid #888;
border-radius: 5px;
font-size: 14px;
padding-left: 5px;
}
.btn{
width: 200px;
height: 30px;
outline: none;
border: 0;
background: #a01350;
cursor: pointer;
color: #fff;
}
.btn:active{
background: #490b25;
}
</style>
<script type="text/javascript">
function generateFun(){
var data = document.getElementsByClassName("textbox")[0].value;
if(data != ""){
var url = "https://api.qrserver.com/v1/create-qr-code/?size=1000x1000&data=" + data;
document.getElementsByClassName("qr-code")[0].style.backgroundImage = "url(" + url + ")";
document.getElementsByClassName("qr-code")[0].style.backgroundSize = "100% 100%";
document.getElementsByClassName("qr-code")[0].innerHTML = "";
document.getElementsByClassName("qr-code")[0].style.border = "0";
}else{
return false;
}
}
</script>
</head>
<body>
<center>
<h2>QR Code Generator</h2>
<div class="qr-code">
<span>QR Code Generator</span>
</div>
<p><input type="text" name="date" placeholder="Type Your Text" class="textbox">
<p><button class="btn" onclick="generateFun()">Click to Generate</button>
</center>
</body>
</html>
Thank you.
You Also May Like –
Generate Random Number with Barcode in PHP
