QRCODE Generator

Hello readers, today in this blog you will learn how to create a qr code generator yourself using the html,css (optional) and javascript.

I will show the source code using the code block and you can copy it yourself OR download the zip of the source code at the last section

Now, let's start the tutorial.First,you need to create a html file and this is the html code needed.

<form onsubmit="generate();return false;"> <div class="input"> <input type="text" id="qr" name="" placeholder="Enter a values"> </div> </form> <div id="qrResult" style="height: 100px;width: 100px" class="result"></div> <br /> <br /> <br /> <button type="submit" onclick="generate()" class="btn">Generate</button>

Secondly, add this js code in the htmlextension file also.

<script type="text/javascript"> var qrcode=new QRCode(document.getElementById('qrResult'),{ width:100,height:100 }); function generate(){ var message=document.getElementById('qr'); if(!message.value){ alert("Please enter a values! "); message.focus(); return; } qrcode.makeCode(message.value); } </script>

These code is use to judge is the user have enter a value, if it is not any value entered, an alert will called.

Now,we can add some css to beautify the website (you can skip this step if you don't mind)

*{ box-sizing: border-box; padding: 0px; } body{ text-align: center; } header{ font-size: 28px; } div.result{ padding-top: 20px; padding-left: 120px; } input{ width: 280px; border: none; outline: none; padding-bottom: 2px; padding-left:3px; } div.input{ width: 280px; border-bottom: 1px solid #9DA0C0; margin-left: 40px; } .btn{ width: 80px; height: 40px; background: none; color: #5765FF; border: 1px solid #5765FF; border-radius: 5px; } .btn:hover{ transition: 0.8s; background: #5765FF; color: #fff; } footer{ position: absolute; bottom: 0; left: 0; background: #5765FF; color: #fff; width: 100%; height: 40px; padding-top: 11px; } #icon{ padding-left: 5px; }

Now we are going to add the core of generator, js extension file. For this js file you need to download at below.

Download js file : qrcode.js

After downloaded, import the file to your project folder and use <script scr="qrcode.js">in the html to link the js file.

If it didn't went wrong,the qr code generator is done and should be work now.

That is all the tutorial today, if you are facing any problem, contact me using the comment below or go to contact us