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

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: https://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 ✌️

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

Comments

More from this blog

🎣 Webhooks Demystified - Get Real-Time Personal Notifications with Discord Webhooks

🛑 Why You Should Avoid the onclick Attribute in Your Code

🎉 Presenting Memoriez - A quick & easy journal

🗃️ How to use Mongoose with Next.js for MongoDB?

🎨 Sort imports using Prettier in a JavaScript Project inside VS Code!

Hey all 🤘!

HTML

CSS

JavaScript

Command Palette

Comments

More from this blog

Hey all 🤘!

HTML

CSS

JavaScript