Create a QR code generator
Tags: webdev, html, css, javascript
Published: 2021-09-19 16:43:34

Hello everyone, today we will see how to create a qr code generator with the open source library [qrious.js](https://github.com/neocotic/qrious). 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 :

{% post https://dev.to/clementgaudiniere/how-does-a-qr-code-work-c2a %}

### 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 :

``` html
<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](https://github.com/neocotic/qrious/releases).

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

``` html
<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 <canvas> 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.

```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.

![Table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgfjvsu6wakhq9x30v8i.jpg)

The resulting JS code looks like this :

```js
// 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);
});
```

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

{% codepen https://codepen.io/clement-gaudiniere/pen/YzVjYqZ %}


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