Create an QR Code Generator Project using HTML CSS & JavaScript

Last Updated : 16 Oct, 2023

In today’s digital world, QR codes are widely used and provide a practical way to share information and access content with a quick scan. This deeply manually operated will show you step-by-step how to create a QR code generator from scratch using HTML, CSS, and JavaScript.

This article will give you the knowledge necessary to develop an intuitive web-based application, regardless of whether you want to generate QR codes for URLs, contact details, or event tickets. Explore all aspects of QR code generation by following our step-by-step instructions.

Preview Image

Web-capture_16-10-2023_123930_

Prerequisites

Approach

In this code example, we have used a library of JavaScript to create a QR code, and when the user enters any text or link in the input field and presses Enter, that keyword (text) will generate a new QR code by using qrcode.makeCode, and that QR code can be scanned by any device and will give the output that the user entered in the input field.

Example: The above approach implemented below.

HTML

<!--Index.html-->
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href="./style.css" /> 
  
    <!-- External QR code library -->
    <!--This is the liberary which helps 
        to convert simple data to the images-->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="header"> 
        <div class="box"> 
            <h1> 
                QR Code Generator 
            </h1> 
            <hr /> 
            <div class="sqrcode"></div> 
            <div class="qrcode"></div> 
            <input type="text" 
                   placeholder="Paste a URL or enter  
                                text, then press enter"  
                   onchange="generateQr()" /> 
            <!--generateQr() is the fuction which helps 
                to convert data into QR using the js library-->
        </div> 
    </div> 
    <script src="./script.js"></script> 
</body> 
  
</html>

CSS

/* Style.css */
  
/* Apply styles to the body */
body { 
    font-family: "Ubuntu", sans-serif; 
    background-color: #f0f0f0; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
} 
  
/* Style the container */
.container { 
    background-color: #fff; 
    box-shadow: 0px 0px 10px
        rgba(0, 0, 0, 0.1); 
    border-radius: 5px; 
    padding: 20px; 
    text-align: center; 
} 
  
/* Style the header */
.header { 
    text-align: center; 
} 
  
/* Style the h1 element */
h1 { 
    font-size: 28px; 
    margin-bottom: 10px; 
    color: #333; 
} 
  
/* Style the hr element */
hr { 
    border: 1px solid #ddd; 
    margin: 20px 0; 
} 
  
/* Style the input field */
input[type="text"] { 
    width: 100%; 
    padding: 10px; 
    font-size: 16px; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    outline: none; 
} 
  
/* Style the QR code div */
.qrcode { 
    margin: 20px 0; 
} 
  
/* Style the button */
button { 
    background-color: #007bff; 
    color: #fff; 
    padding: 10px 20px; 
    font-size: 16px; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
    outline: none; 
} 
  
/* Hover effect for the button */
button:hover { 
    background-color: #0056b3; 
}

Javascript

// Script.js 
// create a new QRCode instance 
let qrcode = new QRCode( 
    document.querySelector(".qrcode") 
); 
  
// Initial QR code generation 
// with a default message 
qrcode.makeCode("Why did you scan me?"); 
  
// Function to generate QR 
// code based on user input 
function generateQr() { 
    if ( 
        document.querySelector("input") 
            .value === "" || 
        document.querySelector("input") 
            .value === " ") { 
        alert( 
            "Input Field Can not be blank!"
        );}  
    else { 
        qrcode.makeCode( 
            document.querySelector( 
                "input"
            ).value); 
}}