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
    }
}