QR Code Generator With HTML, CSS, and JavaScript ( Free Source Code)

QR Code Generator With HTML, CSS, and JavaScript ( Free Source Code)

Hello there, today’s article will teach you how to make a QR Code Generator with HTML, CSS, and JavaScript. I already discussed how to develop a Random Quote Generator in JavaScript, and now it’s time to create a QR Code Generator in JavaScript.

QR (Quick Response) codes may store a large amount of data, and users can instantly access it by scanning the QR code. Users may enter a text or URL into my QR Code Generator software to produce a QR code for it. It is a QR code creator app, not a scanner app.

WhatsApp Group Join Now
Youtube Click here
Instagram Click here
Telegram Group Join Now

QR Code Generator -Enter text or website below

QR Code Generator

QR Code Generator

Video Tutorial of QR Code Generator

YouTube player

You saw a demo of a QR code generator and how I made it using HTML, CSS, and JavaScript in the video above. As you can see, I utilized the preserver API to produce a QR code from user inputs. So, even if you’re a newbie, I believe you understand the codes and principles behind developing this QR app.

If you liked our QR code generator and want to acquire the source codes or files, you may do so at the bottom of this page.

See also  DAY-4

But, if you’re a newbie, I recommend watching the above video two or three times and attempting to construct it yourself because I’ve explained each JavaScript line with written comments in the video.

You might like this:

QR Code Generator in JavaScript [Source Codes]

In JavaScript, develop a QR Code Generator. First, you must generate three files: HTML, CSS, and JavaScript. Simply copy and paste the supplied codes into your file after you’ve created these files. You can also obtain the source code files for this QR Code Generator App by clicking the download button below.

First, create an HTML file called index.html and put the following codes into it. Remember to save the file with the.html extension.

Step 1: Set Up Your HTML Structure

Start by creating a basic HTML structure for your QR code generator. This will include the input field, a “Generate QR Code” button, a div for displaying the QR code, and the “Download” button (initially hidden). You can also include any other HTML elements or styling you prefer.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Add the necessary meta tags, title, and CSS links -->
</head>
<body>
    <div class="qr-container">
        <h1 class="qr-heading">QR Code Generator</h1>
        <label for="text" class="qr-label">Enter text or URL:</label>
        <input type="text" id="text" class="qr-input">
        <button id="generate" class="qr-button">Generate QR Code</button>
        <div id="qrcode" class="qr-code"></div>
        <a id="downloadLink" class="qr-download" style="display: none;" download="qrcode.png">Download QR Code</a>
    </div>
    <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Step 2: Add CSS Styles

See also  DAY-6

Define your CSS styles to format and style the various elements within your QR code generator. Customize the styles to match your design preferences.

  body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }

        .qr-container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }

        .qr-heading {
            text-align: center;
        }

        .qr-label {
            display: block;
            margin-top: 10px;
        }

        .qr-input {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .qr-button {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .qr-button:hover {
            background-color: #0056b3;
        }

        .qr-code {
            text-align: center;
            margin-top: 20px;
        }

        .qr-download {
            display: block;
            text-align: center;
            margin-top: 20px;
            text-decoration: none;
            background-color: #007BFF;
            color: #fff;
            padding: 10px;
            border-radius: 5px;
        }

        .qr-download:hover {
            background-color: #0056b3;
        }

Step 3: Include JavaScript Libraries

In the HTML file, include the JavaScript libraries required for generating QR codes. You can use the QRCode library, which is a JavaScript QR code generator.

<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="script.js"></script>

Step 4: Create JavaScript Functionality (script.js)

Write JavaScript code to handle user interactions and generate the QR code. This script will also control the visibility of the “Download” button.

document.addEventListener("DOMContentLoaded", function() {
    const generateButton = document.getElementById("generate");
    const textInput = document.getElementById("text");
    const qrcodeDiv = document.getElementById("qrcode");
    const downloadLink = document.getElementById("downloadLink");

    generateButton.addEventListener("click", function() {
        const text = textInput.value;
        if (text) {
            qrcodeDiv.innerHTML = ""; // Clear previous QR code
            const qrcode = new QRCode(qrcodeDiv, text);

            // Convert the QR code to an image
            const qrCodeImage = qrcodeDiv.querySelector("img");

            // Show the Download button and set its href to the QR code image
            downloadLink.style.display = "block";
            downloadLink.href = qrCodeImage.src;
        }
    });
});

This JavaScript code listens for a click on the “Generate QR Code” button, generates the QR code based on the user input, displays the QR code, and makes the “Download” button visible with a download link to the generated QR code.

See also  How To Create a Parallax Scrolling Effect

Download Complete Free Code –

Telegram Group Join Now

Show 3 Comments

3 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *