DEV Community

Cover image for Create a QR code generator
Clément Gaudinière
Clément Gaudinière

Posted on

Create a QR code generator

Hello everyone, today we will see how to create a qr code generator with the open source library qrious.js. This library generates a qr code using different algorithms based on the principles discussed in the last article (module, alignment marker, timing patern, etc.), which I strongly invite you to read to better understand how qr codes work :

Let's go

The first thing to do is to get hold of the librairie. You can for example use a CDN (Content Delivery Network), or download it directly to your computer/server.

For those wishing to use a CDN, I recommend this link to include in your document :

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

For those who want to download the library, you can download it via NPM: $ npm install --save qrious or Bower: $ bower install --save qrious or via the latest releases page.

Once included in your document, we will create the HTML structure :

<div>
  <h1>Are you ready to create your own Qr code?</h1>
  <div class="container-divided">
    <textarea placeholder="Type something" id="qrCodeTextArea"></textarea>
    <canvas id="qr"></canvas>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

The qrious.js library generates qr codes via the html elements, without them you will not be able to generate your qr code. You can however give the id of your choice to the <canvas> element.

Adding style

Now I'm going to add some styling to my various elements, you can of course, if you wish, customise the CSS.

@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
@media (min-width: 545px) {
  html, body {
    height: 100%;
  }
}
body {
  background: url("https://i.ibb.co/f0sL4rx/t-l-chargement.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  margin: 0;
  position: relative;
  z-index: 1;
}
body h1 {
  color: white;
  font-family: "Lato", sans-serif;
  margin: 10px 25px;
  text-align: center;
}

div {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: space-around;
  justify-content: center;
}
div .container-divided {
  flex-direction: row;
  flex-wrap: wrap;
  width: 900px;
  max-width: 95%;
  height: fit-content;
  justify-content: space-around;
  margin: 50px 0;
}
div .container-divided textarea {
  margin: 0 0 50px 0;
  background: #eaeaea;
  color: black;
  display: block;
  padding: 14px 10px;
  outline: none;
  border-radius: 4px;
  width: 300px;
  max-width: 95%;
  height: 250px;
  text-align: left;
  resize: vertical;
  text-indent: 10px;
  border: none;
  font-size: 15px;
}
div .container-divided textarea::-moz-selection {
  color: inherit;
  background-color: rgba(118, 199, 239, 0.54);
}
div .container-divided textarea::selection {
  color: inherit;
  background-color: rgba(118, 199, 239, 0.54);
}

input {
  font-size: 1rem;
  font-family: "Open Sans", sans-serif;
  text-align: center;
  margin-bottom: 4rem;
  border: none;
  border-bottom: 2px solid #fff;
  padding: 0.5rem;
  background-color: transparent;
  color: #fff;
  outline: none;
}
input::placeholder {
  color: #fff;
}
input::-moz-placeholder {
  color: #fff;
}
input:-ms-input-placeholder {
  color: #fff;
}

canvas {
  width: 200px;
  height: 200px;
}
Enter fullscreen mode Exit fullscreen mode

Setting up the librarie

To set up this library, you can use the documentation located on github, or use this table which allows you to understand the different parameters that can be set within this library.

Table

The resulting JS code looks like this :

// Our textarea
const input = document.querySelector("#qrCodeTextArea");
// Our canvas element with 'qr' id
const canvas = document.getElementById("qr");

// The various parameters
const createQR = v => {
  return new QRious({
    element: canvas,
    value: v,
    level: "L",
    size: 400,
    backgroundAlpha: 0,
    foreground: "white" });

};

// We create the qr code
const qr = createQR(input.value);

// If the text box changes, update the qr code.
input.addEventListener("input", () => {
  const qr = createQR(input.value);
});
Enter fullscreen mode Exit fullscreen mode

After a few minutes of code, you can see the result below :

I hope you enjoyed this tutorial, if you have any questions, feel free to ask me in the comments. 👍

Top comments (4)

Collapse
 
zippytyro profile image
Shashwat Verma

Thanks dude!

Collapse
 
clementgaudiniere profile image
Clément Gaudinière

Glad have could help you !

Collapse
 
dongphuchaitrieu profile image
Đồng Phục Hải Triều

Great tutorial!

Collapse
 
clementgaudiniere profile image
Clément Gaudinière