How to Make a QR Code Generator Using QRCode.js

How to Make a QR Code Generator Using QRCode.js
How to Make a QR Code Generator Using QRCode.js



How to Make a QR Code Generator Using QRCode.js - We often find QR Codes in a print or visual design, document or other media. Both are used to convey information in the form of URL addresses, telephone numbers, text, images, or other things depending on needs.

There are many online tools for creating QR codes for free. But what if you want to create a QR Code with our own QR Code Generator ?

Many third party libraries or open source code and ways to create QR Codes that you can use. One of them is creating a QR Code Generator using javascriptand QRCode.js.

Make a QR Code Generator Using Javascript and QRCode.js

QRCode.js is a javascript library for creating QRCode. QRCode.jsCross-browser support with HTML5 Canvas and table tags in the DOM. QRCode.js has no dependencies. It's a cool open source library, and easy to understand.

If you are curious about how to make a QR Code Generator using QRCode.js on a Blogger or WordPress website, here are the steps:

Create a QR Code Generator Page on Blogger

QR Code Generator page on Blogger
  1. Open the Blogger Dashboard
  2. Select Page menu > Create Page
  3. Change the display to HTML Mode
  4. Copy the following HTML, CSS and Javascript Code and template on the page
  5. Click Publish
<input class="user-input" id="myinput" type="text" onchange="refreshqr()" placeholder="Enter Your QR Here">
<p class='note'>Supports Dynamic Codes, Tracking, Analytics, Free text, vCards and more.</p>
<button class="button" onclick="refreshqr()">Generate QR Code</button>
<br><br>
<div align="center" id="yourid"></div>
<style>
.user-input {width: 100%;outline: none;border: none;border-radius: 0.5rem;background: #9b8774ad;}
.button {display:inline-flex;align-items:center; margin:10px 0;padding:12px 15px;outline:0;border:0; border-radius:3px;line-height:20px; color:#fffdfc; background:#204ecf; font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px}
</style>
<!--[ Script to QR Code Generator ]-->
    <script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.js"></script>
<script type="text/javascript">

  var qrcode = new QRCode(document.getElementById("yourid"), {
    text: 'MyText',
    width: 350,
    height: 350,
    colorDark : "#000",
    colorLight : "#fff",
    correctLevel : QRCode.CorrectLevel.H
});
function refreshqr(){
  qrcode.makeCode(document.getElementById('myinput').value); // make another code.
}
  
</script>

You can adjust the CSS code according to the appearance of the Blogger template that you use to make it more attractive.

Create a QR Code Generator Page in WordPress

  1. Buka Dashboard Worpdress
  2. Select Pages > Create New Page
  3. Change the display to HTML Mode
  4. Copy the following Code and the template on the page
  5. Click Publish
<style>
.user-input {width: 100%;outline: none;border: none;border-radius: 0.5rem;background: #9b8774ad;}
.button {display:inline-flex;align-items:center; margin:10px 0;padding:12px 15px;outline:0;border:0; border-radius:3px;line-height:20px; color:#fffdfc; background:#204ecf; font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px}
</style>

<input class="user-input" id="myinput" type="text" onchange="refreshqr()" placeholder="Enter Your QR Here">
<p class='note'>Supports Dynamic Codes, Tracking, Analytics, Free text, vCards and more.</p>
<button class="button" onclick="refreshqr()">Generate QR Code</button>
<br><br>
<div align="center" id="yourid"></div>

<!--[ Script to QR Code Generator ]-->
    <script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.js"></script>
<script type="text/javascript">

  var qrcode = new QRCode(document.getElementById("yourid"), {
    text: 'MyText',
    width: 350,
    height: 350,
    colorDark : "#000",
    colorLight : "#fff",
    correctLevel : QRCode.CorrectLevel.H
});
function refreshqr(){
  qrcode.makeCode(document.getElementById('myinput').value); // make another code.
}
  
</script>

You can adjust the CSS code according to the appearance of the wordpress theme that you are using to make it more attractive.

Demo QR Code Generator



Closing

So, that was How to Make a QR Code Generator Using QRCode.js . If this article is useful, you can share and recommend it to friends who need it, if you have other questions, you can ask via comments.

Post a Comment

Welcome to Jehangir Khan's Tech Blog! We're thrilled to have you join the conversation. Your comments and feedback are valuable to us and help us create a community of tech enthusiasts who share ideas and insights. We encourage you to share your thoughts related to the post and engage in a respectful and meaningful conversation with others. Please refrain from spamming or promoting your own content in the comments section. We also ask that you avoid using inappropriate language or attacking others. Please note that all comments will be reviewed before they are posted, and we reserve the right to remove any comments that violate our policies. Let's explore the world of technology together and inspire each other to achieve our goals!

Previous Post Next Post