Hello friends, today I will share with you the code of a QR Code generator using HTML, CSS and JavaScript. In the most recent blog post, I have shared How to add Lazy Load Google Adsense ads for Blog and The importance of jumb break page break and maximum number of posts displayed at the index page you can Read if you missed it.
QR code stands for Quick Response has the ability to store a lot of data and users can easily access the information by scanning the QR code. In this article, the user can enter text or URL to convert and generate a QR code for it, to read the QR code, you need a code reader software or a code reader tool. QR.
Share QR Code generator code using HTML, CSS and JavaScript
Here is the source code of the QR Code generator tool, I will share the HTML and JavaScript code as the main, and the CSS will be for reference only and you need to edit the CSS or customize it to suit the Blog. your.
HTML Code inserted at the position you want to display.
< div class = "qr-wrapper" >
< div class = "qr-header" >
< h4 > QR Code Generator </ h4 >
< p > Paste a url or enter text to create QR code </ p >
</ div >
< div class = "qr-form" >
< input type = "qr-text" spellcheck = "false" placeholder = "Enter text or url" >
<button class = "qr-button" > Generate QR Code </ button >
</ div >
< div class = "qr-code" >
< img src = "" alt = "qr-code" >
</ div >
</ div >
CSS Code (reference) inserted before the . tag</head>
< style >
.qr-wrapper { max-width : 100% ; background : #fff ; border-radius : 7px ; padding : 15px ; transition :height . 2s ease}
.qr-header h4 { font-size : 21px ; font-weight : 500 }
.qr-header p { margin-top : 5px ; color : #575757 ; font-size: 16px }
.qr-wrapper .qr-form { margin : 20px 0 25px }
.qr-form :where(input , button ){ width : 100% ; height : 55px ; border :none; outline :none; border-radius : 5px ; transition :. 1s ease}
.qr-form input { font-size : 18px ; padding : 0 17px ; border: 1px solid #eee ; transition :. 2s ease}
.qr-form input :focus { border : 1px solid #7577a9 }
.qr-form input ::placeholder { color : #999 }
.qr-form button { color : #fff ; cursor :pointer; margin-top : 20px ; font-size : 17px ; background : #7577a9 }
.qr-code{ opacity : 0 ; display :none; padding : 33px 0 ; border-radius : 5px ; align-items :center; pointer-events :none; justify-content :center; border : 1px solid #ccc }
.qr-wrapper .active .qr-code { opacity : 1 ; display :flex; pointer-events :auto; transition :opacity . 5s . 05s ease}
.qr-code img { width : 170px }
@ media (max-width: 430px ) {
.qr-header p { color : #696969 }
.qr-form :where(input , button ){ height : 52px }
.qr-code img { width : 160px }
}
</ style >
JavaScript Code inserted before the . tag</body>
<script>
const qrWrapper = document .querySelector( ".qr-wrapper" ),
qrInput = qrWrapper.querySelector( ".qr-form input" ),
generateBtn = qrWrapper.querySelector( ".qr-form button" ),
qrImg = qrWrapper.querySelector( ".qr-code img" );
let preValue;
generateBtn.addEventListener( "click" , () => {
let qrValue = qrInput.value.trim();
if (!qrValue || preValue === qrValue) return ;
preValue = qrValue;
generateBtn.innerText = "Generating QR Code..." ;
qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data= ${qrValue} ` ;
qrImg.addEventListener( "load" , () => {
qrWrapper.classList.add( "active" );
generateBtn.innerText = "Generate QR Code" ;
});
});
qrInput.addEventListener( "keyup" , () => {
if (!qrInput.value.trim()) {
qrWrapper.classList.remove( "active" );
preValue = "" ;
}
});
Epilogue
That's all the code to create a QR Code generator using the HTML, CSS and JavaScrip I shared above. If you have any problems related to the code in the article, you can comment below and I will help you as soon as possible. And you can also try the demo tool below:
