How To Generate QR Code Using Javascript

Websolutionstuff | Jul-19-2021 | Categories : PHP jQuery

In this tutorial we will see how to generate QR code using javascript. we will implement QR code generator without any kind of package or plugins. we are create QR code using API. Using API, you can create dynamic qr code generator and read QR code graphics yourself and also you can create dynamic QR code using QR code API.

Using API, you can customize as per requirements like size, color, bgcolor, margin, format etc. This API is very easy to use for generate QR code using javascript.

So, let's start to implement generate QR code in Javascript.

QR code API: command “create-qr-code” (generate QR code, QR code generator)

 

Send a GET request of following form to our system to get a QR code graphic as PNG image (=to generate a QR code):

http(s)://api.qrserver.com/v1/create-qr-code/?data=[URL-encoded-text]&size=[pixels]x[pixels]

create-qr-code is command and data = pass text as per requirement, size = 100*100 for example

 

 

Example of  how to generate QR code using javascript using API

Copy below HTML Code and CSS and paste in your file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How To Generate QR Code Using Javascript - Websolutionstuff</title>   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
</head>
<style type="text/css" media="screen">
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Quicksand;
}
body {
    width: 100%;
    height: 100vh;
    background:linear-gradient(to right top,#b597f6,#439cfb);
    display: flex;
    justify-content: center;
    align-items: center;
}
.main {
    width: 50%;
    height: 70%;
    padding: 50px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 10px 25px -10px rgba(0,0,0,0.5);
    border-radius: 5px;
}
.main p {
    font-size:36px;
    margin:10px;
}
.main .input {
    width: 90%;
    padding: 10px 25px;
    border: 3px solid #9e9e9e;
    outline: none;
    margin: 15px 0 40px;
}
.main .input:focus {
    border: 3px solid #439cfb;
}
.btn ,.input {
    font-size:1.1rem;
    border-radius: 5px;
}
.main .btn {
    width: 90%;
    padding: 12px 0;
    outline: none;
    border:none;
    border-radius: 5px;
    background: #439cfb;
    color: #fff;
    transition: 0.3s;
    margin: 0 0 25px 0;
}
.main .code {
    margin: 25px 0;
}
.main .btn:hover {
    box-shadow: 0 10px 25px -10px #439cfb;
}
.main #note {
    font-size: 1.2rem;
    font-family: 'Courier New', Courier, monospace;
}
#toast {
    position: absolute;
    bottom: 0;
    border-radius: 5px;
    padding: 15px 50px;
    background: #07f49e;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 10px 25px -10px #07f49e;
    transition: 0.3s;
}
#toast.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px;
}  
</style>
<body>
    <div class="main">
        <p>How To Generate QR Code Using Javascript</p>
        <input type="text" class="input" value="" id="textvalue">
        <button class="btn">Generate</button>
        <img src="images/default.png" alt="Your QR Code will be show here..." class="code">
        <p id="note">Made with ♥ by Websolutionstuff</p>
    </div>
    <div id="toast">Successfully Generated</div>    
</body>
</html>

 

 

Now copy javascript code and add javascript in footer.

<script>
var btn = document.querySelector('.btn');
var code = document.querySelector('.code');
var toast = document.querySelector('#toast');
btn.addEventListener("click",generate);
function generate() {    
    var data = $('#textvalue').val();    
    var url = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${data}`;
    code.src = url;
    toastDiv();
}
function toastDiv() {
    toast.className = "show";
    setTimeout( function() {
        toast.className = toast.className.replace("show" , "");
    },2000);
}
</script>

 

And finally you will get output like below screen shot.

How To Generate QR Code Using Javascript

Recommended Post
Featured Post
How To Image Upload Using Ajax In Laravel 9
How To Image Upload Using Ajax...

In this article, we will see how to image upload using ajax in laravel 9. Here, we will learn about image upload in...

Read More

Feb-07-2023

Laravel whereMonth and whereYear Example
Laravel whereMonth and whereYe...

In this article, we will show you laravel whereMonth and whereYear examples. whereMonth and whereYear are...

Read More

Jan-25-2021

Laravel tips DB Models and Eloquent - Part 3
Laravel tips DB Models and Elo...

Welcome back to the third installment of our series on Laravel tips for database models and Eloquent. If you've been...

Read More

Oct-16-2023

Carbon Add Years To Date In Laravel
Carbon Add Years To Date In La...

In this article, we will see examples of carbon adding years to date in laravel. Here we will laravel add...

Read More

Dec-07-2020