How to make your QR Code Generator using HTML, CSS & JavaScript

Written by Usman on Jan 20th, 2022 ・ Views ・ Report Post

Usman Visit User Profile
Table of contents

Hey all 🤘!

So I am back again! This time we have a little different project to build and it's an easy one.

I discovered that this was interesting and indeed it is!

I will teach you how you can make your own QR Code Generator using HTML, CSS, and JavaScript!

See the Pen QR Code Generator using JavaScript by Max Programming (@Max_Programming) on CodePen.

HTML

The HTML we need is very very straightforward! What we need in this case is this:

<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>  
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>  
  <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>  
  <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"IE=edge"</span>></span>  
  <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>></span>  
  <span class="hljs-tag"><<span class="hljs-name">title</span>></span>QR Code Generator<span class="hljs-tag"></<span class="hljs-name">title</span>></span>  
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>  
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>  
  <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>QR Code Generator<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>  
  <span class="hljs-tag"><<span class="hljs-name">input</span>   
    <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>   
    <span class="hljs-attr">spellcheck</span>=<span class="hljs-string">"false"</span>  
    <span class="hljs-attr">id</span>=<span class="hljs-string">"text"</span>  
    <span class="hljs-attr">value</span>=<span class="hljs-string">"https://google.com"</span>  
  /></span>  
  <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"qrcode"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>  
  <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>  
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>  
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
  • We add some attributes to the input to select it in JavaScript, we remove spellcheck from the input so any spelling is valid and we add a default value for the input.
  • We add <div> with an id of qrcode to use it in JavaScript and output the QR Code
  • We create the <script> tag to include a simple library that helps us generating the QR Code.

CSS

For the CSS, we add some super simple styles to make it look a little better than default.

We are adding the CSS in <style> tags because it's minimal.

<span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="css">
* {  
    <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;  
    <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;  
    <span class="hljs-attribute">box-sizing</span>: border-box;  
}

<span class="hljs-selector-tag">body</span> {  
    <span class="hljs-attribute">width</span>: <span class="hljs-number">80%</span>;  
    <span class="hljs-attribute">height</span>: <span class="hljs-number">100vh</span>;  
    <span class="hljs-attribute">margin</span>: auto;  
    <span class="hljs-attribute">display</span>: grid;  
    <span class="hljs-attribute">place-items</span>: center;  
}

<span class="hljs-selector-tag">h1</span> {  
    <span class="hljs-attribute">font-family</span>: sans-serif;  
}

<span class="hljs-selector-tag">input</span> {  
    <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;  
    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">20px</span>;  
    <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid steelblue;  
    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">1.5rem</span>;  
    <span class="hljs-attribute">letter-spacing</span>: <span class="hljs-number">2px</span>;  
    <span class="hljs-attribute">outline</span>: none;  
}  
</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>

Most of the styling is done for the input element to give it a good border and padding.

JavaScript

The JavaScript used to generate the QR Code is also very minimal so we'll write it in the <script> tags inside our HTML.

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

Firstly, we select the HTML elements by ID to use them.

<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="javascript">

<span class="hljs-keyword">const</span> qrcode = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"qrcode"</span>);  
<span class="hljs-keyword">const</span> textInput = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"text"</span>);

</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>

Then, we use the QRCode constructor to create an instance of it. Which comes along with the qrcode.js library we added the script for.

We pass in the <div> with the id of qrcode in the constructor And we use the makeCode method to embed the value of the input in a QR Code.

The trim() method helps in removing extra space before and after a string

<span class="hljs-keyword">const</span> qrcode = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"qrcode"</span>);  
<span class="hljs-keyword">const</span> textInput = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"text"</span>);

<span class="hljs-keyword">const</span> qr = <span class="hljs-keyword">new</span> QRCode(qrcode);  
qr.makeCode(textInput.value.trim());

Now, whenever the user types into the input, we generate the QR Code again using the makeCode method.

We use the oninput event on the textInput element for that. We get an event object with the function, we use the e.target.value to get the current value of the input and generate the QR Code accordingly!

textInput.oninput = <span class="hljs-function">(<span class="hljs-params">e</span>) =></span> {  
    qr.makeCode(e.target.value.trim());  
};

Here is the final code for the QR Code generator: https://easypastes.tk/pastes/qrcode-gen

I hope you liked it! Comment down your thoughts! There is always room for improvement so let me know your suggestions on this project!

Connect with me on my YouTube channel and my Twitter 😉

Until next time, keeping awesome ✌️

Comments (0)