How to Create a QR Code Generator with HTML, CSS, and JavaScript

Published on June 25, 2024

Hello everyone, and welcome back! In today’s video, we’ll teach you how to create a simple QR Code Generator using HTML, CSS, and JavaScript. This project is perfect for beginners looking to practise their web development skills. So, let’s dive right in and start with the HTML part!

First, we’ll set up our basic HTML structure. We start with the <!DOCTYPE html> declaration to specify the document type. Then, we add the opening and closing html tags and set the language attribute to en for English.

Inside the head section, we include the viewport meta tag to ensure our application is responsive on different devices. We also add a title for our page, ‘QR Code Generator.

Next, we include the QRCode.js library by adding a script tag. This library helps us generate QR codes easily. We also link our external CSS file styles.css to style our application.

Now, let’s move on to the body section. We’ll start by adding a div with the class wrapper to contain our entire application.

Inside the wrapper div, we add an input field with the ID userInput where users can enter the text or URL they want to convert into a QR code.

Next, we create a div with the class options to hold our QR code customization options. Here, we add a dropdown menu to select the size of the QR code and two colour input fields to choose the background and foreground colours.

After that, we create a div with the class box for our buttons. We add a Generate button with the ID submit and initially disable it. We also add a Download link to allow users to download the generated QR code. Lastly, we add a div with the class container to display the QR code.

CSS

CSS is what makes our web pages look good. It controls the layout, colours, fonts, and overall appearance of our website. We’ll be using it to style our QR code generator.

We’ll start with some global styles. First, we remove all padding and margin from every element to ensure a consistent layout. Then, we set the font to Georgia, “Times New Roman”, Times, serif, giving our text a classic look.

Next, we style the body of our webpage. We set the height to always cover the full height of the viewport and choose a soft, warm background colour. This sets a pleasant tone for our design.

Now, let’s style the main container, which we’ll call the wrapper. We give it a white background and add some padding for space around the content. To centre it on the page, we use absolute positioning and transform properties. We also add rounded corners and a subtle shadow to give it a lifted effect.

The input field where users will enter their text or URL needs to be full width, with no borders except a stylish bottom border in a standout colour. We also increase the font size and make the text uppercase for better readability.

In the options section, we use flexbox to align items and distribute space evenly. This ensures our dropdown and colour inputs are neatly aligned. The dropdown menu is styled with a custom appearance and a background colour that matches our theme.

We also have colour input fields for selecting background and foreground colours for the QR code. These are styled to be transparent with no borders, and we use custom colour swatches with a border that matches our theme colour.

The box section contains the “Generate” button and the “Download” link. These are styled to look consistent with the rest of the design, featuring uppercase text, padding, rounded corners, and appropriate colours. The “Generate” button is styled differently for both normal and disabled states to indicate whether it can be clicked.

Finally, the container div, where the QR code will be displayed, is centred using flexbox. This keeps everything neat and aligned.

JAVASCRIPT

First, we use the $(document).ready(function () { line to ensure our script runs only after the HTML document is fully loaded. This avoids any issues with elements not being available when the script runs.

Next, we declare variables to reference various elements on the page: the container for the QR code, the input field, the buttons, and the options for size and colours.

We then set up event listeners for the size and colour options. When the user changes the size, background colour, or foreground colour, these event listeners capture the new values and store them in our variables.

We also have an inputFormatter function to sanitise the user input, removing any special characters. This ensures our QR code text is clean and safe to use.

When the submit button is clicked, we clear any existing QR code from the container. We then create a new QR code using the QRCode library, passing in the user input and the selected options for size and colours.

Once the QR code is generated, we convert it to a data URL and set it as the href attribute of the download button. We also handle the filename based on the user input, ensuring the file is named appropriately when downloaded.

We also listen for changes in the user input field. If the input field is empty, we disable the submit button and hide the download button. If there’s text in the input field, we enable the submit button.

Finally, we set up an event listener for when the window loads. This initialises our variables and UI elements to their default states, ensuring the user starts with a clean form.

And that’s how we add functionality to our QR code generator using JavaScript. We’ve covered how to handle user inputs, generate the QR code, and provide a download link. Thanks for watching! Be sure to like, share, and subscribe for more tutorials. See you next time!

Our Latest Blog

Become a Selenium Automation Expert Ace the LSET Tester Exam & Unlock New Opportunities

March 16, 2025ByFlorence

Our Latest Blog

Become a Selenium Automation Expert: Ace the LSET Tester Exam & Unlock New Opportunities!

Boost Your Career with the LSET Selenium Tester Exam

Key Takeaways from the International AI and Machine Learning Workshop with Dr. Eric Hossein Fontes

Popular Courses

Follow Us