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
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.
<!--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 =
</ 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 */ /* 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 ;
} |
// 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: