Create a QR code generator

#webdev #html #css #javascript

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 :

How does a QR code work ?

Clément Gaudinière ・ Aug 3 ・ 3 min read

#qrcodes #flashcodes #tech #programming

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>

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>

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;
}

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.

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);
});