Here is a simple HTML and JavaScript example for generating QR codes using the popular qrious JavaScript library. After that, I'll provide a detailed installation guide on how to set this up on your local machine or server.
QR Code Generator with HTML & JavaScript
1. HTML Structure
Create an index.html file with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Generator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
#qr-container {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>QR Code Generator</h1>
<p>Enter text to generate a QR code:</p>
<input type="text" id="text-input" placeholder="Enter text or URL" style="padding: 10px; width: 80%; max-width: 400px;">
<br><br>
<button onclick="generateQRCode()" style="padding: 10px 20px; cursor: pointer;">Generate QR Code</button>
<div id="qr-container">
<canvas id="qr-code"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<script>
function generateQRCode() {
const inputText = document.getElementById('text-input').value;
if (inputText.trim() === "") {
alert("Please enter some text or a URL.");
return;
}
const qr = new QRious({
element: document.getElementById('qr-code'),
size: 200,
value: inputText
});
}
</script>
</body>
</html>
Features:
Input Box: Users can input text or a URL to generate the corresponding QR code.
Generate Button: Clicking the button generates a QR code.
Canvas Element: Displays the generated QR code using HTML5's <canvas>.
2. Installation Guide
Step 1: Introduction
QR codes are widely used in many applications to encode information such as URLs, text, contact details, etc., that can be scanned and interpreted by devices. In this guide, we'll walk you through creating a simple QR code generator using HTML and JavaScript, leveraging the qrious library.
By the end of this guide, you'll have a fully functioning web-based QR code generator that can be set up locally or on a web server.
Step 2: Required Tools and Setup
Before you start building the QR code generator, make sure you have the following tools installed:
A text editor (e.g., Visual Studio Code, Notepad++, or Sublime Text).
A modern web browser (e.g., Google Chrome, Firefox, Microsoft Edge).
A basic web server if you want to host it online, though for local use, no server is required.
Internet Access: This is necessary to download the external JavaScript library (qrious), which generates QR codes.
Step 3: Setting Up the Project Folder
Start by creating a folder to hold your project files. This folder will contain the HTML file and any other resources you need.
1. Create a Folder: Create a new folder on your computer, name it something like qr-code-generator.
2. Create the HTML File:
Open your text editor.
Create a new file and save it as index.html inside the qr-code-generator folder.
Step 4: Writing the HTML Code
Now, let's write the HTML for the QR code generator.
1. Basic Structure:
Every HTML document begins with a basic structure, including the <html>, <head>, and <body> tags. In the <head>, you can set the document title and include any CSS or JavaScript needed.
2. Adding the Input Field:
We need a text input field where users can type the content (text, URL, etc.) they want to convert into a QR code.
<input type="text" id="text-input" placeholder="Enter text or URL" style="padding: 10px; width: 80%; max-width: 400px;">
This input field includes a placeholder to guide the user and some basic inline styling for appearance.
3. Adding the Generate Button:
Below the input field, we add a button that users will click to generate the QR code:
<button onclick="generateQRCode()" style="padding: 10px 20px; cursor: pointer;">Generate QR Code</button>
When clicked, this button will trigger a JavaScript function called generateQRCode(), which we will define next.
Step 5: Including the QRious Library
To generate QR codes, we'll use the qrious JavaScript library, which is lightweight and easy to use. You can include it via a CDN (Content Delivery Network) by adding this script tag inside the <head> or right before the closing </body> tag in your HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
Step 6: Writing the JavaScript Function
Now, let's define the generateQRCode() function. This function will:
Capture the text entered by the user.
Use the QRious library to generate a QR code with the provided text.
Display the QR code in a <canvas> element.
Here's how to write the function inside a <script> tag:
<script>
function generateQRCode() {
const inputText = document.getElementById('text-input').value;
if (inputText.trim() === "") {
alert("Please enter some text or a URL.");
return;
}
const qr = new QRious({
element: document.getElementById('qr-code'),
size: 200,
value: inputText
});
}
</script>
Explanation:
1. Capture the Input Text: The text entered in the input field is fetched using document.getElementById('text-input').value.
2. Validate Input: If the input is empty, an alert will prompt the user to enter some text.
3. Create the QR Code: The QRious constructor is used to create a QR code. It takes the following options:
element: The HTML element where the QR code will be rendered (in this case, the <canvas> with id qr-code).
size: The size of the QR code in pixels.
value: The text to be encoded in the QR code.
4. Canvas Element: The QR code is drawn on the HTML5 <canvas> element with id qr-code.
Step 7: Testing the Application Locally
Once the index.html file is saved in your project folder, you can test the application locally by simply opening the index.html file in your web browser:
1. Navigate to the project folder.
2. Double-click the index.html file to open it in your default browser.
3. Enter some text or a URL in the input field and click "Generate QR Code." The QR code should appear below the button.
Step 8: Deploying to a Web Server
If you want to host this QR code generator online, follow these steps:
1. Web Hosting: You can upload the index.html file to any web hosting service that supports static sites (e.g., GitHub Pages, Netlify, or your own hosting provider).
2. Upload Files: Most web hosts will provide an FTP or dashboard to upload files. Simply upload your index.html file to the root directory or public_html folder of your hosting account.
3. Access Your Site: After uploading, navigate to your website URL (e.g., http://yourdomain.com) to see the live QR code generator.
You now have a working QR code generator that uses HTML and JavaScript. The qrious library is a powerful and lightweight tool for creating QR codes without requiring complex setups or back-end services. You can easily customize the generator's appearance, functionality, and style to fit your needs.
