Looking to create your own QR codes without relying on third-party tools? In this tutorial, you will be able to create a fully functional QR code generator using HTML, CSS and JavaScript. Today's tutorial is perfect for beginners because I will show you how to design a clean and quick QR code. In the end you will have a simple tool that can convert any text or link into a scannable QR code. No complicated libraries, we will just use the qrcodejs library, which will make it easy for us to generate QR. So without wasting any time, let us get started.
Live demo:
Below is a live demo that will help you understand how the look QR Code Generator.
HTML:
We start with the HTML section by creating a container <div> that will wrap all of our QR code generator elements. Inside this container, we will first create an <h2> tag. In this heading tag, we add a title for the tool.
Next we include an input field with an <input> element where users can type any text or URL that they want to convert to a QR code. Below this input we add a <button> element labeled "Generate QR Code" which the user will click to trigger the QR code generation.
Finally we create another <div> with the ID "qrcode". This acts as a placeholder where the generated QR code will be displayed after the user clicks 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>Stylesheet (CSS):
Centering the Container:Coming to the CSS section we start by setting the CSS font-family property to sans-serif to keep the text clear. Then we apply a background color of Hex code #317574 which gives the page a new blue look.
We use the Flexbox method to center our content vertically and horizontally. By setting display to flex, justify-content to center and align-items to center, the container ensures that whatever we put inside the <body> will be perfectly centered in the viewport.
We also set the body height to 100vh which spans the entire height of the browser window. Finally we remove any 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;
}
Coming to the container class, we start it with a white background (hex code #fff) so that the content stands out clearly against the dark page background. We then add 20px of padding so that the text and elements don't touch the edges.
To improve the design we apply a 10px border-radius that softens the corners. We then add a box-shadow so that the container visually rises from the page.
The text inside is center-aligned using text-align so that the title, input and button are stacked nicely. Finally we set the width to 300px which gives the container a fixed size that works well for a QR code generator tool.
.container {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
text-align: center;
width: 300px;
}
Now we move on to styling the text input field. First we give it a width of 250px so that it fits within the container. We apply 10px of padding to make typing more comfortable. Next we add 10px to margin-bottom so that there is proper spacing between the elements. We set a border-radius of 6px to soften the edges which gives the input a modern look. Finally we set the font-size to 14px so that the entered text is legible.
input[type=text] {
width: 250px;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #8d8d8d;
border-radius: 6px;
font-size: 14px;
}And for the next step we move on to styling the button element. We start by applying a "10px 20px" padding to give the button a clickable area. We remove the default border by setting the border to none to keep the clean design. For a modern look we slightly round the corners with a border-radius of 6px.
And for the final step we add a hover state to the button. When the user hovers over it the background color changes to a darker shade #02867d.
button {
padding: 10px 20px;
font-size: 14px;
border: none;
background: #0ea5a4;
color: #fff;
border-radius: 6px;
cursor: pointer;
}
button:hover {
background: #02867d;
}#qrcode {
margin-top: 20px;
}JavaScript:
Adding the QRCode Library:For QR code generation we will use QRCode.js library which helps us to generate QR codes directly in our projects. With the help of this library we can easily generate QR codes for text, links or any custom data. We are using the official QRCode.min.js build hosted on jsDelivr. To do this we will simply add the following code just at the end of the closing </body> tag of our HTML file.<.p>
<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>Moving on to the JavaScript code we add an on click event to the Generate button. When the user clicks the button, it executes the event handler function.
We create a variable called text which stores the trimmed value entered in the input field. This ensures that unnecessary spaces at the start or end are removed. If the user does not enter any text we display an alert message asking them to enter text or a URL.
Next we clear any previously generated QR code by setting the innerHTML of the qrcode container to an empty string.
Then we call the "QRCode.toCanvas()" method. This method generates a QR code based on the user input. We pass 3 arguments:
- The actual input from the user (text or URL).
- An options object which sets the QR code size and margin.
- A callback function which receives either an error or the generated canvas element.
const input = document.getElementById('textInput');
const btn = document.getElementById('generateBtn');
const qrcodeDiv = document.getElementById('qrcode');
btn.addEventListener('click', () => {
const text = input.value.trim();
if(!text) { alert('Please enter text or URL'); return; }
// clear previous QR
qrcodeDiv.innerHTML = '';
QRCode.toCanvas(text, { width: 200, margin: 2 }, function (error, canvas) {
if (error) console.error(error);
qrcodeDiv.appendChild(canvas);
});
});If there is an error, it is logged to the console. Otherwise the created QR code canvas will be added to the qrcode container which will display the QR code on the page.
Output:
Today we are ending the QR Code Generator tutorial here, and if you have any questions about the QR Code Generator, you can share your feelings in the comments. You can follow our YouTube channel to get more updates about the CODEHEMU tutorial. I ended the tutorial Namaste🙏
Post a Comment