Want to create your own QR codes without using third-party tools? In this tutorial, you will learn how to build a fully functional QR code generator using HTML, CSS and JavaScript.
Today's tutorial is perfect for beginners! I will show you how to design a fast QR code generator. By the end, you will have a simple tool that can turn any text or link into a scannable QR code.
No need for complicated libraries—we will simply use the qrcodejs library, which makes generating QR codes easy. So without wasting any time, let us get started.
Table of Content
Project Folder Structure:
First, create a folder for your QR Code Generator project. Inside that folder, create three files named index.html, style.css and script.js. These will be your HTML document, stylesheet, and javascript file.
If you are having trouble setting up your project, don’t worry! Check out our easy step-by-step guide on How to Structure an HTML Project to get your folders organized the right way.
HTML:
We will start with the HTML section by creating a container <div> that will hold all the elements of our QR code generator. Inside this container, we will add a <h2> tag to display the title of our tool.
Next, we will add a <input> field. There, users can type any text or link that they want to convert into a QR code. Below this input, we will include a <button> labeled "Generate QR Code". By clicking on it, users can create their QR code.
Finally, we will create another <div> with the ID qrcode. The generated QR code will appear here after clicking the button.
<div class="container">
<h2>QR Code Generator</h2>
<input type="text" id="textInput" placeholder="Enter text or URL">
<button id="generateBtn">Generate QR Code</button>
<div id="qrcode"></div>
</div>Live Demo:
Below is a live demo to help you see how the QR Code Generator works. Click "Run Code" to see the generator live.
CSS:
Centering the Container:
Moving on to the CSS section, we will start by setting the font-family to sans-serif. Then we will apply a background color with the hex code #317574, giving the page a deep green look.
Next we will use the Flexbox method to center our content both vertically and horizontally. We also set the body height to 100vh so it covers the full height of the browser window. Finally, we remove the default margin by setting margin to 0.
body {
font-family: sans-serif;
background: #317574;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}Styling the Container:
We give the container a white background (hex code #fff) so that the content stands out against the dark green page. We also add 20px of padding so that the elements inside don't touch the edges.
To make the container look nicer, we apply a 10px border-radius, which softens the corners. The text inside is centered using text-align.
.container {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
text-align: center;
width: 300px;
}Styling for input field:
Now, let us style the text input field. First we set its width to 250px, so it fits nicely within the container. We apply 10px of padding to make typing more comfortable. We add 10px of padding to make typing feel more comfortable.
Next we add a 10px bottom margin to create spacing between elements. We also set a border-radius of 6px to soften the edges. Lastly, we set the font size to 14px.
input[type=text] {
width: 250px;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #8d8d8d;
border-radius: 6px;
font-size: 14px;
}Styling the Button:
Next, we style the button. We give it 10px 20px padding so it’s easy to click, remove the default border for a cleaner look.
Finally, we add a hover effect. When the user hovers over the button, its background color changes to a darker color (hex code #02867d).
button {
padding: 10px 20px;
font-size: 14px;
border: none;
background: #0ea5a4;
color: #fff;
border-radius: 6px;
cursor: pointer;
}
button:hover {
background: #02867d;
}Margining QR placeholders:
To add some space above the QR code, we give the QR code placeholder (#qrcode) a top margin of 20px.
#qrcode {
margin-top: 20px;
}JavaScript:
Adding the QRCode Library:
To create QR codes, we will use the QRCode.js library, which allows us to create QR codes directly in our projects. With the help of this library, we can easily create QR codes of text or links. Here, we will use the official QRCode.min.js build hosted on jsdelivr.
<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>To include it, place the code just before the closing </body> tag in your HTML file.
Generate QR:
Now, let us move on to the JavaScript part. We start by adding an onclick event to the "Generate" button. When the user clicks the button, the function kicks in and starts creating the QR code.
Inside this function we create a variable called text, which stores the trimmed value from the input field. This removes any extra spaces. We display a warning, if the user leaves the input blank. Before making a new QR code, we clear the old by setting the innerHTML.
const input = document.getElementById('textInput');
const btn = document.getElementById('generateBtn');
const qrcodeDiv = document.getElementById('qrcode');
btn.addEventListener('click', () => {
//Remove extra space
const text = input.value.trim();
if(!text) { alert('Please enter text or URL'); return; }
//clear previous QR code
qrcodeDiv.innerHTML = '';
//Generate QR Code
QRCode.toCanvas(text, { width: 200, margin: 2 }, function (error, canvas) {
if (error) console.error(error);
qrcodeDiv.appendChild(canvas);
});
});Finally, we call the QRCode.toCanvas() method to generate the QR code. This requires three things—what the user typed, some settings for size and margins. The last one is a callback function that either displays the QR code or shows an error.
That's all for today's QR code generator tutorial. If you have any questions or feedback, don't hesitate to share them in the comments. For more updates and tutorials, follow our YouTube channel. Namaste🙏 I ended the tutorial.
0 Comments