How to Create QR Code Generator Using jQuery Library

Want to create a QR Code Generator of your own? Then here’s the perfect solution by just using  jQuery Library and Google API. Before that let’s learn something about QR Codes, first:

What is a QR Code?

QR Code a.k.a “Quick Response Code” is a technology that is used from 90’s to link text, websites, documents, phone numbers etc. and can store much more all in one single code.

The technology was evolved far before in the year 1994 and the technology came to existence for the automotive industry in Japan so as to track vehicles during manufacture.

Check this out : How to Create Animated GIF Images Online for Free

That was in 1994, now the technology has evolved far better and now QR Codes are used  in a wide scale and in a broad context like in tracking applications, entertainment sectors, marketing, mobile phone apps and has many more applications.

QR Codes have now become a part of day to day life, whenever a user finds a QR Code on any of their products they just scan out the code with their phone or using a scanner and check out the content in the QR code.

Going further..

How to create your own QR Code Generator ?

If you’re a coder and have a good hands on Javascript or jQuery than this is a very easy and effective. You can make the use of  jquery.qrcode.js library and also you have to use Google API.

Let’s check this out:

Step 1: Include the jQuery library in the webpage of your website. Use the below code to call the Google API and the jQuery.QRCode Library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>

Now it’s time for complete code:

HTML Code:

<div>
<h1>QR Code Generator</h1>
<p>Generate QR Code Instantly</p>
<p><textarea name="txt" style="height:50px;width:350px;" required="required"></textarea></p>

<p>Image Size : <select name="size">      //Dimension Dropdown of the QR Code image
<option value="100x100">100x100</option>
<option value="200x200">200x200</option>
<option value="300x300" selected>300x300</option>
<option value="400x400">400x400</option>
<option value="500x500">500x500</option>
<option value="600x600">600x600</option>
<option value="700x700">700x700</option>
<option value="800x800">800x800</option>
<option value="900x900">900x900</option>
<option value="1000x1000">1000x1000</option>
</select></p>
<p><input type="submit" value="Generator QR Code" id="qr-gn"></p>
</div>

jQuery Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
<script>
$(function(){
$("#qr-gn").click(function(){
$("#qrcode").html("");
var txt = $.trim($('textarea[name="txt"]').val());
if(txt == '') {
alert("Please enter text you want to embed in QR Code");
return false;
}
var size = $('select[name="size"]').val();
var sizeSplit = size.split('x');
var width = sizeSplit[0];
var height = sizeSplit[1];
generateQRcode(width, height, txt );
return false;
});

function generateQRcode(width, height, text) {
$('#qrcode').qrcode({width: width,height: height,text: text});
}
});
</script>

CSS Code:

<style>
body {
text-align: center;
color: #000;
}
</style>

Here’s the screenshot of the QR Code Generator:

This is the code which will generate a simple QR Code Generator without any CSS as a new project for your portfolio. You can use this QR Code to link any text, phone number or notes for your personal use.

Check out other Cool Tutorials on CSS and JS:

• How to Add Watermark to Images/Photos Using jQuery
• Bounce.js – How to Create Javascript Animations Easily Without Writing Code
• Hover.css – How to Add Beautiful CSS3 Hover Over Effects on your Website
• Animate.CSS – How to Add CSS3 Animations with CSS3 Library Perfectly
• Typed.js – How to Create a Typing/Typewriter Effect using jQuery