Usman Sabuwala
Usman's Blog

Usman's Blog

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

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

Usman Sabuwala

Published on Sep 26, 2021

3 min read

Subscribe to my newsletter and never miss my upcoming articles

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!

HTML

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

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QR Code Generator</title>
</head>
<body>
  <h1>QR Code Generator</h1>
  <input 
    type="text" 
    spellcheck="false"
    id="text"
    value="https://google.com"
  />
  <div id="qrcode"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</body>
</html>
  • 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.

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 80%;
    height: 100vh;
    margin: auto;
    display: grid;
    place-items: center;
}

h1 {
    font-family: sans-serif;
}

input {
    padding: 10px;
    border-radius: 20px;
    border: 2px solid steelblue;
    font-size: 1.5rem;
    letter-spacing: 2px;
    outline: none;
}
</style>

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.

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

<script type="text/javascript">

const qrcode = document.getElementById("qrcode");
const textInput = document.getElementById("text");

</script>

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

const qrcode = document.getElementById("qrcode");
const textInput = document.getElementById("text");

const qr = new 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 = (e) => {
    qr.makeCode(e.target.value.trim());
};

Here is the final code for the QR Code generator: 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 儭

Share this