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 anidofqrcodeto use it in JavaScript and output the QR CodeWe 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: 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 ✌️