Create an QR Code Generator Project using HTML CSS & JavaScript
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
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 : 100 vh; } /* 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 */ h 1 { 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); }} |
Output: