How To Generate QR Code Using Javascript

In this article, we will see how to generate QR code using javascript. we will implement a QR code generator without any kind of package or plugins. we are creating QR code using API. Using API, you can create a dynamic QR code generator and read QR code graphics. Using this API, you can customize as per requirements like size, color, bgcolor, margin, format, etc. This API is very easy to use to generate QR code using javascript.

So, let's see QR code example in javascript, generate QR code in javascript, dynamic QR code generator javascript, QR code generator jquery, HTML QR code generator, how to generate QR code using jquery, jquery generate QR code, jQuery QR Code Generator.

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

Copy the below HTML Code and CSS and paste them into 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 - Techsolutionstuff</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 Techsolutionstuff</p>
    </div>
    <div id="toast">Successfully Generated</div>    
</body>
</html>

 

 

Now, copy the javascript and add it to the 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>

 


You might also like :

RECOMMENDED POSTS

FEATURE POSTS