working with qrcode.js for generating qr code - powerful chrome app by varun raj

Learning programming language doesn't matters at all.Because applying it real world for the end users comfort matters here.The same way last week i was learning with QR code to generate from javascript code and i was wondering where to use it and how users could easily benefited.at the same time +Varun Raj was working with QR code generator javascript and successfully create the application which helps sync between desktop to mobile phones with this QR code generator.

QR code it javascript.

   

Installation of qrcode.js:

just like other javascript include just include the script in to the web page or ur preferred projects.

<!--- include this in your header -->
<script src="qrcode.js">
</script>

Generate the QR code :

so what do we need for QR code is URL alone.this QR code.js gives to create new object for developers to just pass the url to the process the function.

<script>
new QRCode(document.getElementById("YOUR_DESIRED_ID_TO GENERATE_QR")
   , "http://www.i-visionblog.com/");
</script>

thus running this script will generate the QR code instant manner for your webpage in the given ID.

so,now how could we make user friendly for other users.and comes here is Chrome App. +Varun Raj had just created the simple extension for chrome browser and which could work with Chrome API to interact with browser Title and URL.then it is processed using popup.html of the app and generate the QR code for the users to capture it and use it later in their smartphones.

Chrome App Structure:

 APP Extension
 |
 |---------- manifest.json //initalize app with permissions,icons and other API mentions
 |
 |---------- popup.js //handles the extension events,clicks and responds in chrome
 |
 |---------- Jquery.min.js //here just to append the title text in extension
 |
 |----------  popup.html //our extension html markup where we generate QR code
 |
 |----------  qrcode.js //Javascript main file to generate the QR code.it acts like library.
 |
 |----------  icon.png //our extension icon

Live Demo for non Chrome Users:

new QRCode(document.getElementById("qrcode")
   , "http://www.i-visionblog.com/");

See the Pen working with QR code.js ~ i-visionblog by s.shivasurya (@shivasurya) on CodePen.

Snapshot:

Snapshot on the chrome app.

about developer:

Developer : +Varun Raj , skcript.com
CHENNAI - INDIA
facebook  | Google | Twitter 

Thus we had seen the qrcode.js make our life easier without typing long urls and makes easy transfer for smartphones.report for bug and share is care.