Header Ads

How to Create QR Code Generator Using JavaScript

Abhay Kumar July 05, 2022

What is QR Code ?

QR Code is a machine-readable code consisting of an array of black and white squares, typically used for storing URLs or other information for reading by the camera on a smartphone.

HTML Code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <span>Step Towards Coding</span><br>
        <input type="text" id="text" placeholder="Enter text.." class="input" />
        <button type="button" onclick="generateQR()">
        GENERATE QR
        </button>
        <div id="qr-image">
            <span class="error"></span><br/>
            <img id="img" />
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>


CSS Code :

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: #ececed;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.container{
    padding: 40px 60px;
    background: #fff;
    display: flex;
    align-items: center;
    border: 5px solid rgba(190, 190, 190, 0);
    box-shadow: 0 0 15px rgba(100, 200, 100, 0.3);
    flex-direction: column;
}
.input{
    padding: 12px 20px;
    width: 300px;
    margin-bottom: 20px;
}
button{
    padding: 12px 20px;
    margin-bottom: 20px;
    border: 0;
    background: #485697;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
}
qr-image{
    display: none;
}
img{
    margin-bottom: 20px;
}


JavaScript Code :

function generateQR(){
    document.querySelector("#qr-image").style.display = "block";
    let QRtext = document.querySelector("#text").value;
    if(QRtext.trim().length == 0){
        document.querySelector("#qr-image .error").innerHTML = "Please enter text";
        document.querySelector("#img").style.display = "none";
    } else{
        document.querySelector("#img").style.display = "block";
        document.querySelector("#qr-image .error").innerHTML = "";
        document.querySelector("#img").src = "https://api.qrserver.com/v1/create-qr-code/?size=240x240&data=" + QRtext
    }
}


Tags:

Post a Comment

1 Comments

  1. ShailendraJuly 29, 2022 at 1:29 PM

    JAVA course in Gurgaon
    https://www.onfeetnation.com/profiles/blogs/does-your-java-goals-match-your-practices-3
    APTRON is one of the most liked and famous Java Training Institutes in Gurgaon to offer live training in Java for experts, as well as fresher searching for job based training with certification. Our master Java trainers accompany rich experience from industry's driving organizations and are completely devoted to instructing you on Java Course in Gurgaon place alongside useful information on programming improvement utilizing Java.

    ReplyDelete

Ask Your Queries in the comments