QR Code Generator

Table of Contents

Live Demo
Technologies used -
HTML
CSS
JavaScript
Description

This QR Code Generator allows users to quickly create QR codes for any text or URL. Just enter your desired content, and the tool will generate a QR code image instantly, making it easy to share links or information in a convenient, scannable format.

API Integration: The generateQR function uses an external API to create a QR code based on the input text or URL.

Image Display: Updates the src attribute of the qrImage element to show the generated QR code.

Input Validation: If the input field is empty, an error animation is triggered to prompt users to enter valid data.

Highlighted Source Code
				
					let imgBox = document.getElementById("imgBox");
let qrImage = document.getElementById("qrImage");
let qrText = document.getElementById("qrText");

function generateQR() {
    if (qrText.value.length > 0) {
        // Fetches the QR code image from the API based on user input
        qrImage.src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + qrText.value;
        imgBox.classList.add("show-img"); // Shows the generated image
    } else {
        // Adds an error effect if the input is empty
        qrText.classList.add("error");
        setTimeout(() => {
            qrText.classList.remove("error");
        }, 1000);
    }
}

Recent Projects

Follow me

Github Linkedin Instagram

Related Projects
Fun Project

Tic Tac Toe Game

The Interactive Tic Tac Toe Game is a classic two-player game implemented using HTML, CSS, and JavaScript. This engaging application

Read More »
Type to search