{"id":30,"date":"2022-06-12T05:49:00","date_gmt":"2022-06-12T05:49:00","guid":{"rendered":"https:\/\/foolishdeveloper.com\/index.php\/2022\/06\/12\/qr-code-generator-using-javascript-css-free-code\/"},"modified":"2023-12-19T11:27:42","modified_gmt":"2023-12-19T11:27:42","slug":"qr-code-generator-javascript","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/qr-code-generator-javascript\/","title":{"rendered":"QR Code Generator Using JavaScript &#038; CSS (Free Code)"},"content":{"rendered":"<style>\n  p{font-size:18.5px;<br \/>\n    color: #000000;<br \/>\n  font-family: sans-serif;<\/p>\n<p>    display: block;<br \/>\n    margin-block-start: 1em;<br \/>\n    margin-block-end: 1em;<br \/>\n    margin-inline-start: 0px;<br \/>\n    margin-inline-end: 0px;<br \/>\n    word-wrap: break-word;<\/p>\n<p>  line-height: 2em;}<\/p>\n<p>  h3{text-align: left;<br \/>\n    font-family: Open Sans,Arial,sans-serif;<br \/>\n    line-height: 1.7em;<br \/>\n    color:black;<br \/>\n    color:#333131;<br \/>\n    font-weight: 520;<\/p>\n<p>    -webkit-font-smoothing: antialiased;<br \/>\n    }<\/p>\n<p>   h2{text-align: left;<br \/>\n    font-family: Open Sans,Arial,sans-serif;<br \/>\n    line-height: 1.7em;<br \/>\n    color:black;<\/p>\n<p>    font-weight: 620;<br \/>\n    -webkit-font-smoothing: antialiased;<br \/>\n    }<\/p>\n<p>.class {<br \/>\n background:#edf0f2;<br \/>\n font-family: Consolas,Monaco,Lucida Console,monospace;<br \/>\n line-height: 1.65;<br \/>\n word-wrap: break-word;<br \/>\n border-radius: 5px;<br \/>\n color:#001d8f;<br \/>\n font-size:17.1px;<br \/>\n padding-left:10px;<br \/>\n white-space: pre-wrap;}<\/p>\n<p>    button.last-btn{<br \/>\n  padding:14px 29px;<br \/>\n    font-size:17px;<br \/>\n    background-color:#0e87f0;<br \/>\n    border-radius:6px;<br \/>\n    color:white;<br \/>\n      font-family: Open Sans,Arial,sans-serif;<br \/>\n      border:none;<br \/>\n    margin-left:35%;<\/p>\n<p>  }<\/p>\n<p> @media only screen and (max-width: 400px) {<br \/>\n  button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 300px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 600px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<br \/>\n    @media only screen and (max-width: 800px) {<br \/>\n    button.last-btn{<br \/>\n  margin-left:0px;<br \/>\n  margin-right:0px;<br \/>\n  }<br \/>\n}<\/p>\n<p>      @media only screen and (max-width: 400px) {<br \/>\n  .copyButton {<br \/>\n     width: 45%;<br \/>\n  }<\/p>\n<\/style>\n<div class=\"separator\" style=\"clear: both;\"><\/div>\n<p>In this article, you will learn how to create a <strong>QR code generator using&nbsp;JavaScript<\/strong>.<br \/>\nIf you know basic JavaScript, you can easily create a simple QR code generator Javascript. You can follow our other site <a href=\"https:\/\/thetechvirtual.com\/?xxx&amp;3RWwam-8ee558\" target=\"_blank\" rel=\"noopener\"><b>Tech Virtual<\/b><\/a> to create more other types of <strong>JavaScript QR Code Generator<\/strong>.<\/p>\n<p>QR code is a type of <span style=\"color: #2b00fe;\">matrix barcode<\/span> that is currently used in almost all digital payments and products. In fact, it is a machine-readable optical label that contains some special information about the product.<\/p>\n<div class=\"separator\" style=\"clear: both;\"><\/div>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-1879 size-full\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2022\/06\/QR-Code-Generator-Using-JavaScript.webp\" alt=\"QR Code Generator Using JavaScript\" width=\"1000\" height=\"435\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2022\/06\/QR-Code-Generator-Using-JavaScript.webp 1000w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2022\/06\/QR-Code-Generator-Using-JavaScript-300x131.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2022\/06\/QR-Code-Generator-Using-JavaScript-768x334.webp 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p style=\"text-align: left;\">I have shared many more types of JavaScript projects before. This <strong>JavaScript QR code generator<\/strong> is fully operational.<\/p>\n<h2 style=\"font-size: 29px; text-align: left;\">JavaScript QR Code Generator<\/h2>\n<p>There are many such <a href=\"https:\/\/cdn.rawgit.com\/davidshimjs\/qrcodejs\/gh-pages\/qrcode.min.js\" target=\"_blank\" rel=\"noopener\">QRcode js<\/a> examples on the internet. But here I have shared the complete tutorial and tried to explain to you step-by-step how to create a <strong>QR code generator using JavaScript<\/strong>.<\/p>\n<p>This <strong>QR code generator JavaScript<\/strong>&nbsp;has been created in a very simple way. Here you can <span style=\"color: #2b00fe;\">create a matrix barcode<\/span> of any text or link.<\/p>\n<p>If you do not understand what I am saying and would like to get a live demo of this project then use the demo below.<\/p>\n<p class=\"codepen\" style=\"height: 448px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"448\" data-theme-id=\"light\" data-default-tab=\"result\" data-slug-hash=\"zYRPJvX\" data-preview=\"true\" data-user=\"shantanu-jana\">See the Pen <a href=\"https:\/\/codepen.io\/shantanu-jana\/pen\/zYRPJvX\" target=\"_blank\" rel=\"noopener\"><br \/>\nJavaScript QR Code Generator<\/a> by Shantanu Jana (<a href=\"https:\/\/codepen.io\/shantanu-jana\" target=\"_blank\" rel=\"noopener\">@shantanu-jana<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<div><\/div>\n<p style=\"text-align: left;\">Hopefully, the preview above has helped you to understand how this <strong>QR code generator JavaScript<\/strong> works.<\/p>\n<div>\n<p style=\"text-align: left;\">It is fully functional which means it will work perfectly when you scan it using <strong>QR scanner<\/strong>.<\/p>\n<p style=\"text-align: left;\">Many people think that it is very difficult to create this kind of pure <strong>javascript QR code generator<\/strong>. In fact, it is not. You can easily create if you know <span style=\"color: #2b00fe;\">basic HTML CSS and javascript<\/span>.<\/p>\n<h2 style=\"font-size: 28px; text-align: left;\">How to make a QR Code generator in JavaScript<\/h2>\n<p style=\"text-align: left;\">First I added all the information using HTML. Then designed a <strong>QR Code Generator using JavaScript<\/strong>. JavaScript and <a href=\"https:\/\/cdn.rawgit.com\/davidshimjs\/qrcodejs\/gh-pages\/qrcode.min.js\" target=\"_blank\" rel=\"noopener\">qrcode.js CDN<\/a> are used last.<\/p>\n<p style=\"text-align: left;\">There is a place input in which you can <span style=\"color: #2b00fe;\">input any text or link<\/span>. Then there is a small display in which the QR Code can be seen.<\/p>\n<p style=\"text-align: left;\">Now if you want to create this <strong>QR code generator javascript<\/strong> then follow the tutorial below.<\/p>\n<\/div>\n<h3 style=\"font-size: 26px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 1:<\/span> Basic structure of QR code Generator<!--more--><\/h3>\n<p style=\"text-align: left;\">A box has been created on the web page using the following HTML and CSS. Which will serve as the basic structure of this <strong>QR Code Generator Javascript<\/strong>.<\/p>\n<div class=\"class\">\n<div class=\"class\">&lt;div class=&#8221;form&#8221;&gt;<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&lt;\/form&gt;<\/div>\n<\/div>\n<div class=\"class\">\n<div class=\"class\">body{<\/div>\n<div class=\"class\">&nbsp; &nbsp; background: rgb(200, 220, 224);<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">.form {<\/div>\n<div class=\"class\">&nbsp; font-family: Helvetica, sans-serif;<\/div>\n<div class=\"class\">&nbsp; max-width: 400px;<\/div>\n<div class=\"class\">&nbsp; margin: 100px auto;<\/div>\n<div class=\"class\">&nbsp; text-align: center;<\/div>\n<div class=\"class\">&nbsp; padding: 16px;<\/div>\n<div class=\"class\">&nbsp; background: #ffffff;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a style=\"display: block; padding: 1em 0px; text-align: center;\" href=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhujYRORyCy3LOcKLkntR1gDAvglsxTvxXK5V0KR094ikEffKMCigXI4u8P4zgE31oCs4Z469KCPb7JvFkU6LgbRT9gnAoNMP4sHDltlyuhQkQpwVeFwhzOOtJl9JrDtaZyHigI-QO4S7xnixQE5VKFchsnl2zhMI2PEcOBpKJyJd0bREeR6gy15i8sgg\/s1600\/QR%20Code%20Generator%20Using%20JavaScript%202.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" title=\"Basic structure of QR Generator\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhujYRORyCy3LOcKLkntR1gDAvglsxTvxXK5V0KR094ikEffKMCigXI4u8P4zgE31oCs4Z469KCPb7JvFkU6LgbRT9gnAoNMP4sHDltlyuhQkQpwVeFwhzOOtJl9JrDtaZyHigI-QO4S7xnixQE5VKFchsnl2zhMI2PEcOBpKJyJd0bREeR6gy15i8sgg\/s16000\/QR%20Code%20Generator%20Using%20JavaScript%202.jpg\" alt=\"Basic structure of QR Generator\" border=\"0\" data-original-height=\"435\" data-original-width=\"1000\"><\/a><\/div>\n<h3 style=\"font-size: 26px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 2:<\/span>&nbsp;Add a heading in the barcode generator<\/h3>\n<p style=\"text-align: left;\">\n<p>The following HTML and CSS are used to create a heading in the <strong>QR code generator using Javascript<\/strong>. This heading is just to enhance the beauty.<\/p>\n<div class=\"class\">&lt;h1&gt;QR Code Generator&lt;\/h1&gt;<\/div>\n<div class=\"class\">\n<div class=\"class\">.form h1 {<\/div>\n<div class=\"class\">&nbsp; background: #03773f;<\/div>\n<div class=\"class\">&nbsp; padding: 20px 0;<\/div>\n<div class=\"class\">&nbsp; font-weight: 300;<\/div>\n<div class=\"class\">&nbsp; text-align: center;<\/div>\n<div class=\"class\">&nbsp; color: #fff;<\/div>\n<div class=\"class\">&nbsp; margin: -16px -16px 16px -16px;<\/div>\n<div class=\"class\">&nbsp; font-size:&nbsp; 25px;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a style=\"display: block; padding: 1em 0px; text-align: center;\" href=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEiHZoQ3MFaRboanXPZM9NFFFKpKCPwHQl3KJ5jm7DmLs6ZbR8i6RgdI6xUsiH7eWDoEC7xVXEK55V_9ebRemFgIJ2ZbwmHreQ8tybeAePw1pBtvWlbuVRhptjJLDRcT3UYddI8yi8PAgL-GNm39035UNcLa8Je75wy5_SP1ONXMgr2dTcbLjSODtQPTQw\/s1600\/QR%20Code%20Generator%20Using%20JavaScript%203.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" title=\"Add a heading in the barcode generator\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEiHZoQ3MFaRboanXPZM9NFFFKpKCPwHQl3KJ5jm7DmLs6ZbR8i6RgdI6xUsiH7eWDoEC7xVXEK55V_9ebRemFgIJ2ZbwmHreQ8tybeAePw1pBtvWlbuVRhptjJLDRcT3UYddI8yi8PAgL-GNm39035UNcLa8Je75wy5_SP1ONXMgr2dTcbLjSODtQPTQw\/s16000\/QR%20Code%20Generator%20Using%20JavaScript%203.jpg\" alt=\"Add a heading in the barcode generator\" border=\"0\" data-original-height=\"435\" data-original-width=\"1000\"><\/a><\/div>\n<h3 style=\"font-size: 26px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 3:<\/span> All information of JavaScript QR Code Generator<\/h3>\n<p style=\"text-align: left;\">By below HTML, I have added all the rest of the information in this<strong> javascript QR code generator<\/strong>. Such as input space, QR code viewing display, a generator button, etc.<\/p>\n<div class=\"class\">\n<div class=\"class\">&lt;form&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;input type=&#8221;url&#8221; id=&#8221;website&#8221; name=&#8221;website&#8221; placeholder=&#8221;https:\/\/webisora.com&#8221; required \/&gt;<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&nbsp; &lt;div id=&#8221;qrcode-container&#8221;&gt;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp; &lt;div id=&#8221;qrcode&#8221; class=&#8221;qrcode&#8221;&gt;&lt;\/div&gt;<\/div>\n<div class=\"class\">&nbsp; &lt;\/div&gt;<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&nbsp; &lt;button type=&#8221;button&#8221; onclick=&#8221;generateQRCode()&#8221;&gt;Generate QR Code&lt;\/button&gt;<\/div>\n<div class=\"class\">&lt;\/form&gt;<\/div>\n<\/div>\n<h4 style=\"font-size: 22px; font-weight: 520; text-align: left;\"><span style=\"color: #2b00fe;\">1.&nbsp;Design a place to input<\/span><\/h4>\n<p style=\"text-align: left;\">The input space is designed using the following CSS. Within this input box, you can input text and URLs.<\/p>\n<div class=\"class\">\n<div class=\"class\">.form input[type=&#8221;text&#8221;],<\/div>\n<div class=\"class\">.form input[type=&#8221;url&#8221;] {<\/div>\n<div class=\"class\">&nbsp; box-sizing: border-box;<\/div>\n<div class=\"class\">&nbsp; width: 100%;<\/div>\n<div class=\"class\">&nbsp; background: #fff;<\/div>\n<div class=\"class\">&nbsp; margin-bottom: 4%;<\/div>\n<div class=\"class\">&nbsp; border: 1px solid #ccc;<\/div>\n<div class=\"class\">&nbsp; padding: 4%;<\/div>\n<div class=\"class\">&nbsp; font-size: 17px;<\/div>\n<div class=\"class\">&nbsp; color: rgb(9, 61, 125);<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">.form input[type=&#8221;text&#8221;]:focus,<\/div>\n<div class=\"class\">.form input[type=&#8221;url&#8221;]:focus {<\/div>\n<div class=\"class\">&nbsp; box-shadow: 0 0 5px #5868bf;<\/div>\n<div class=\"class\">&nbsp; padding: 4%;<\/div>\n<div class=\"class\">&nbsp; border: 1px solid #5868bf;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a style=\"display: block; padding: 1em 0px; text-align: center;\" href=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEga6gZQjEiBj5abfmB6u7gdUXKDOedF7LrDKXTxe93ZQzW5ndNR7GJyjDIx68GwOgy3Myjps2KXkp9AGyB8xj7HQEWJ-EXCF9cpIfUN1HdftBSH7VxGhzYBVaEYbmXBJsZd3YeVD2jKXW2xFBjBjXwd00xkuxfBMDRMRJu-kw7e15ySCWPB8ytZCwC0zA\/s1600\/QR%20Code%20Generator%20Using%20JavaScript%205.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" title=\"All information of QR Code Generator\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEga6gZQjEiBj5abfmB6u7gdUXKDOedF7LrDKXTxe93ZQzW5ndNR7GJyjDIx68GwOgy3Myjps2KXkp9AGyB8xj7HQEWJ-EXCF9cpIfUN1HdftBSH7VxGhzYBVaEYbmXBJsZd3YeVD2jKXW2xFBjBjXwd00xkuxfBMDRMRJu-kw7e15ySCWPB8ytZCwC0zA\/s16000\/QR%20Code%20Generator%20Using%20JavaScript%205.jpg\" alt=\"All information of QR Code Generator\" border=\"0\" data-original-height=\"435\" data-original-width=\"1000\"><\/a><\/div>\n<h4 style=\"font-size: 22px; font-weight: 520; text-align: left;\"><span style=\"color: #2b00fe;\">2.&nbsp;Design a place to view the QR Code<\/span><\/h4>\n<p style=\"text-align: left;\">Now an area has been created to view the <span style=\"color: #2b00fe;\">generated QR code<\/span>. You must use the following CSS to design this area. <strong>Machine-readable code<\/strong> will be generated in this area when you click on the Generate button.<\/p>\n<div class=\"class\">\n<div class=\"class\">#qrcode-container{<\/div>\n<div class=\"class\">&nbsp; display:none;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">.qrcode{<\/div>\n<div class=\"class\">&nbsp; padding: 16px;<\/div>\n<div class=\"class\">&nbsp; margin-bottom: 30px;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">.qrcode img{<\/div>\n<div class=\"class\">&nbsp; margin: 0 auto;<\/div>\n<div class=\"class\">&nbsp; box-shadow: 0 0 10px rgba(67, 67, 68, 0.25);<\/div>\n<div class=\"class\">&nbsp; padding: 4px;<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div>\n<blockquote><p>The result I have shown below will not be seen in this step. The qr code can be seen after using JavaScript. I have given this image which will help you to understand what will change in qrcode js example after using this CSS.<\/p><\/blockquote>\n<\/div>\n<div>\n<div>\n<h4><img decoding=\"async\" class=\"aligncenter wp-image-1881 size-full\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2022\/06\/QR-Code-Generator-Using-JavaScript-1.webp\" alt=\"QR Code Generator Using JavaScript\" width=\"1000\" height=\"435\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2022\/06\/QR-Code-Generator-Using-JavaScript-1.webp 1000w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2022\/06\/QR-Code-Generator-Using-JavaScript-1-300x131.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2022\/06\/QR-Code-Generator-Using-JavaScript-1-768x334.webp 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/h4>\n<h4 style=\"font-size: 22px; font-weight: 520; text-align: left;\"><span style=\"color: #2b00fe;\">3.&nbsp;Design the QR Generate button<\/span><\/h4>\n<p style=\"text-align: left;\">\n<p>The following CSS has been used to design the QR code generating button.<\/p>\n<div class=\"class\">\n<div class=\"class\">.form button {<\/div>\n<div class=\"class\">&nbsp; box-sizing: border-box;<\/div>\n<div class=\"class\">&nbsp; -webkit-box-sizing: border-box;<\/div>\n<div class=\"class\">&nbsp; -moz-box-sizing: border-box;<\/div>\n<div class=\"class\">&nbsp; width: 180px;<\/div>\n<div class=\"class\">&nbsp; margin: 0 auto;<\/div>\n<div class=\"class\">&nbsp; padding: 3%;<\/div>\n<div class=\"class\">&nbsp; background: #0853b6;<\/div>\n<div class=\"class\">&nbsp; border: none;<\/div>\n<div class=\"class\">&nbsp; border-radius: 3px;<\/div>\n<div class=\"class\">&nbsp; font-size: 17px;<\/div>\n<div class=\"class\">&nbsp; border-top-style: none;<\/div>\n<div class=\"class\">&nbsp; border-right-style: none;<\/div>\n<div class=\"class\">&nbsp; border-left-style: none;<\/div>\n<div class=\"class\">&nbsp; color: #fff;<\/div>\n<div class=\"class\">&nbsp; cursor: pointer;<\/div>\n<div class=\"class\">}<\/div>\n<div class=\"class\">.form button:hover {<\/div>\n<div class=\"class\">&nbsp; background: rgba(88,104,191, 0.5);<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<div class=\"separator\" style=\"clear: both;\"><a style=\"display: block; padding: 1em 0px; text-align: center;\" href=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEjXzSI2Xz6sh6smIbteDG4hNxdPj0xnCrptiVfWAHTcf4wM27HFPMPtoGWqpBJgncth_cubka2XXiPEeBTVjfLROH8tl9axUA__t9jDT8jn6iYjaSnJ59fottqtLwkbfStWbDfUPfwRhNCDgb_lmkbvWECdDmvaL3uCEL2oQa2Ul32TAvL6oZsnWN0AEQ\/s1600\/QR%20Code%20Generator%20Using%20JavaScript%204.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" title=\"Design the QR Generate button\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEjXzSI2Xz6sh6smIbteDG4hNxdPj0xnCrptiVfWAHTcf4wM27HFPMPtoGWqpBJgncth_cubka2XXiPEeBTVjfLROH8tl9axUA__t9jDT8jn6iYjaSnJ59fottqtLwkbfStWbDfUPfwRhNCDgb_lmkbvWECdDmvaL3uCEL2oQa2Ul32TAvL6oZsnWN0AEQ\/s16000\/QR%20Code%20Generator%20Using%20JavaScript%204.jpg\" alt=\"Design the QR Generate button\" border=\"0\" data-original-height=\"435\" data-original-width=\"1000\"><\/a><\/div>\n<h3 style=\"font-size: 26px; text-align: left;\"><span style=\"color: #2b00fe;\">Step 4:&nbsp;<\/span>Activate QR Code Generator using JavaScript<\/h3>\n<p style=\"text-align: left;\">\n<p>Now we need to implement this <strong>QR code generator JavaScript<\/strong>. First, we need to use a QR code js CDN which will generate the QR code. You must include this API link in your HTML file.<\/p>\n<div class=\"class\">&lt;script src=&#8221;https:\/\/cdn.rawgit.com\/davidshimjs\/qrcodejs\/gh-pages\/qrcode.min.js&#8221;&gt;&lt;\/script&gt;<\/div>\n<p style=\"text-align: left;\">Now all the controls have been added by the following javascript of this <strong>QR code generator javascript<\/strong>. Here I have given an explanation in each line. Hopefully, you won&#8217;t have any difficulty understanding the <span style=\"color: #2b00fe;\">JavaScript code below<\/span>.<\/p>\n<div class=\"class\">\n<div class=\"class\">function generateQRCode() {<\/div>\n<div class=\"class\">&nbsp; let website = document.getElementById(&#8220;website&#8221;).value;<\/div>\n<div class=\"class\">&nbsp; if (website) {<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;let qrcodeContainer = document.getElementById(&#8220;qrcode&#8221;);<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;qrcodeContainer.innerHTML = &#8220;&#8221;;<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;new QRCode(qrcodeContainer, website);<\/div>\n<div class=\"class\"><\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;document.getElementById(&#8220;qrcode-container&#8221;).style.display = &#8220;block&#8221;;<\/div>\n<div class=\"class\">&nbsp; } else {<\/div>\n<div class=\"class\">&nbsp; &nbsp; &nbsp;alert(&#8220;Please enter a valid URL&#8221;);<\/div>\n<div class=\"class\">&nbsp; }<\/div>\n<div class=\"class\">}<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div>\n<div>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1882 size-full\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2022\/06\/how-to-create-a-QR-code-generator.webp\" alt=\"\" width=\"1000\" height=\"435\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2022\/06\/how-to-create-a-QR-code-generator.webp 1000w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2022\/06\/how-to-create-a-QR-code-generator-300x131.webp 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2022\/06\/how-to-create-a-QR-code-generator-768x334.webp 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p style=\"text-align: left;\">Hopefully, the above tutorial has helped you to know how this <span style=\"color: #2b00fe;\">HTML QR code generator works<\/span>.<\/p>\n<p style=\"text-align: left;\">Here we have learned how to <strong>create a QR code generator JavaScript<\/strong>. Next time I am going to write an article that can scan the QR code. Please comment on how you like this<strong> javascript QR code generator<\/strong>.<\/p>\n<\/div>\n<\/div>\n<p><script><br \/>\nfunction generate(){var e,n=document.getElementById(\"downloadx\"),t=document.getElementById(\"btnx\"),a=document.getElementById(\"downloadx\").href,l=25,d=document.createElement(\"span\");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display=\"inline\"):(d.innerHTML=\"\n\n\n\n\n\n\n\n\n\n\n\n<p style='text-align: center'>Download will start after \"+l.toString()+\" Seconds<\/p>\n<p>\",t.style.display=\"none\")},1e3)}<br \/>\n<\/script><\/p>\n<p><button id=\"btnx\" class=\"last-btn\"><i class=\"fa fa-download\"><\/i> Download Code<\/button><\/p>\n<p><a id=\"downloadx\" style=\"display: none;\" href=\"https:\/\/codepen.io\/cpe\/pen\/export\/zYRPJvX\" target=\"_blank\" rel=\"noopener\"><i class=\"fa fa-cloud-download fa-fw\" aria-hidden=\"true\"><\/i> <b>The download will start automatically<\/b> <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, you will learn how to create a QR code generator using&nbsp;JavaScript. If you know basic JavaScript, you can easily create a simple QR code generator Javascript. You can follow our other site Tech Virtual to create more other types of JavaScript QR Code Generator. QR code is a type of matrix barcode [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":658,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[14,40,12,13,41,42],"tags":[],"class_list":["post-30","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-best_javascript","category-css","category-javascript","category-javascript_app","category-qr-code-generator","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":5,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/30\/revisions"}],"predecessor-version":[{"id":3194,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/30\/revisions\/3194"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/658"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=30"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=30"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}