Building a Qr-Code Generator

Building a Qr-Code Generator

Abdulmalik Ayorinde's photo
Abdulmalik Ayorinde
·

7 min read

The good Old Quick Response code yes the small but mighty Qr code while they may look simple there are capable of storing lots of data. But ever wonder why it was called the Quick response code, they have that name because no matter how much data was stored in them, once scanned the code should allow the user to access the information immediately.

Huh 🤪 You get it

Without taking much time let get right into the fun parts 😁😁. I would be listing all we are going to be using below: 

#Installing the Needed packages

npm init - to create our package.json file

npm install -g browserify - require('modules') in the client Side

npm install -g watchify - to watch any changes and recompiles the bundle

npm i qrcode - incharge of generating the qrcode.

Now create an index.html file a style.css file and a script.js file these are the main files we would be navigating through to create the Qr code generator.

Now in the index.html: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Qr code Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
        <div>
            <form id="form-data">
             <div class="control">
                <h2>Fill in the below to Generate Qr-code</h2>
                <input type="text" id="name" name="form-content" class="text-field" maxlength="1000" placeholder="John Doe">
                <input type="submit" value="Create Code" id="generate">
            </div>
            </form>
        </div>
        <div class="code-container">
            <img src="1qr.png" id="code-img" alt="placeholder-code">
        </div>
    </div>

<!-- Would be generated later -->
    <script src="bundle.js"></script>
</body>
</html>

This is just some starter HTML for the input to collect data for the Qr-code and also a placeholder image which can be found at gyazo.com/208b200b4a4db4ddd80521c18abccac5

And also a bundle.js file was referred to and we do not have that. This is where browserify comes in although in collaboration with watchify. By now we should have had both installed globally then we can do this

browserify script.js -o bundle.js

in terminal of your project directory to generate a bundle.js or you can navigate to your package.json and add the below to the "scripts"

"build": "watchify script.js -o bundle.js -v"

this is done with the help of watchify, it helps in watching changes made in the files and rebuilds the bundle.js automatically. You can run the below in the terminal to start it 

npm run build

So with that sorted out, we proceed to the script.js file 

const QRCode = require('qrcode')

const codeImg = document.getElementById('code-img')
const form = document.getElementById('form-data')

const correction = [
    { errorCorrectionLevel: 'H' }
]

form.addEventListener('submit',e => {
    e.preventDefault()
    submit()
})

As you can see we are able to use the nodejs require syntax to get the qrcode module this is handled by browserify. Also, the image and form elements were brought in also the next is the correction level which handles the capability that allows successful scanning of a QR Code even if the symbol is dirty or damaged "H stands for High"

And a submit event listener was added to the form with a submit function which has not been declared and the preventDefault() method which prevents the form from submitting read more on that here https://www.w3schools.com/jsref/event_preventdefault.asp now we have to create the submit function 

function submit() {
    const data = new FormData(form)
    let val = data.get("form-content")
    const inputVal = [
        {data: `${val}`}
    ]
    QRCode.toDataURL(inputVal, correction, (err, url) => {
        if(err) console.error(err)
        codeImg.setAttribute('src', `${url}`)
      })
}

In this function we get the data from the form input and stored it in an object then constructed the function that generates the code, logged the error, and sent the code by setting the src attribute to the URL with is the code.

Now we are done with the all functionality, well at least to an extent there is still a lot to improve on starting from the form validation and a lot of other things to add but to keep this short we can simply add a little bit of styling to it. 

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}
.container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #ff44ff44;
    height: 100vh;
    width: 100vw;
    padding: 10px;
}

h2 {
    padding: 0 10px;
}

img {
    height: 300px;
    border-radius: 10%;
}

.code-container {
    padding: 10px;
    background-color: rgba(245, 143, 245, 0.61);
    border-radius: 100%;
}

input {
    border: 0;
    padding: 20px;
    border-radius: 10px;
    margin: 10px;
}

.text-field {
    width: 90%;
}

input[type='submit'] {
    padding: 10px;
    background-color: rgba(245, 143, 245, 0.61);
    box-shadow: -3px 3px 3px #f58ff5;
}

input:focus {
    outline: none;
}

@media screen and (max-width: 1000px) {
    .container {
        flex-direction: column;
    }
}

Woooooooo that's long 😂😂😂

Conclusion

In this article, we have seen how to create a Qr-code Generator. Also, we discussed little on using browserify and watchify, and how we can use the power of browserify to Use a node-style require() to organize your browser code and load modules installed by npm. You can also go through the qrcode documentation to do more with it. Thank you so much for reading this article to the end.

build