Create an QR Code Generator Project using HTML CSS & JavaScript

Last Updated : 21 May, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Today, more than 75% of websites and apps use QR codes to share links, contact info, or event details quickly. Here, you’ll learn how to make your own QR Code Generator using HTML, CSS, and JavaScript.

We’ll guide you step by step, so even if you’re a beginner, you can follow along easily. By the end, you’ll have a working tool that lets users create QR codes for anything they want.

Project Preview:

Web-capture_16-10-2023_123930_

Prerequisites:

Lets Start Making QR Code Generator

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.

index.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>
style.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;
}
script.js 
// 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);
}}

Output:

Animation


Next Article
Create a QR Code Scanner or Reader in HTML CSS & JavaScript

S
srivastava4nishant
Improve
Article Tags :

Similar Reads