How to Create an Interactive QR Code Generator Web Application Using HTML, CSS, and JavaScript
How to Create an Interactive QR Code Genrator Web Application Using HTML, CSS and JavaScript
Welcome to my blog! Today, I'm going to guide you through the process of creating a QR Code Generator web application using HTML, CSS, and JavaScript. By the end of this tutorial, you'll have a fully functional web application that allows users to generate QR codes for any text input. We'll also include a download button for you to easily get the source code.
Step 1: Setting Up the HTML Structure
First, let's set up the basic HTML structure for our web application. Create an index.html file and add 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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>QR Code Generator</h1>
<input type="text" id="textInput" placeholder="Enter text here">
<button id="generateBtn">Generate QR Code</button>
<div id="qrCode"></div>
<a id="downloadBtn" download="qr-code.png">Download QR Code</a>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Adding Styles with CSS
Next, we'll add some styles to make our web application look better. Create a styles.css file and add the following code:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.container {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
margin-bottom: 20px;
}
input, button {
padding: 10px;
margin: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
#generateBtn {
background-color: #007BFF;
color: #fff;
cursor: pointer;
}
#generateBtn:hover {
background-color: #0056b3;
}
#qrCode {
margin-top: 20px;
}
#downloadBtn {
display: none;
margin-top: 20px;
padding: 10px 20px;
background-color: #28a745;
color: #fff;
text-decoration: none;
border-radius: 5px;
cursor: pointer;
}
#downloadBtn:hover {
background-color: #218838;
}
Step 3: Writing JavaScript Code
Now, let's write the JavaScript code to make our QR Code Generator interactive. Create a script.js file and add the following code:
document.getElementById('generateBtn').addEventListener('click', function () {
const textInput = document.getElementById('textInput').value;
if (textInput.trim() === "") {
alert("Please enter some text to generate QR code.");
return;
}
const qrCodeContainer = document.getElementById('qrCode');
qrCodeContainer.innerHTML = "";
const qrcode = new QRCode(qrCodeContainer, {
text: textInput,
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
setTimeout(() => {
const img = qrCodeContainer.querySelector('img');
const downloadBtn = document.getElementById('downloadBtn');
downloadBtn.href = img.src;
downloadBtn.style.display = "inline-bl
ock";
}, 300);
});
Step 4: Including QRCode.js Library
To generate QR codes, we'll use a JavaScript library called QRCode.js. Download the library from QRCode.js GitHub and include it in your project directory. Then, add the following line in the <head> section of your index.html file:
<script src="qrcode.min.js"></script>
Step 5: Putting It All Together
Your project directory should now look like this:
qr-code-generator/
index.html
styles.css
script.js
qrcode.min.js
When you open index.html in your browser, you should see a simple form to input text and a button to generate the QR code. After generating the QR code, a download button will appear to save the QR code as an image.
Source Code
You can download the complete source code from the link below:
By following these steps, you can create a fully functional QR Code Generator web application using HTML, CSS, and JavaScript. I hope you found this tutorial helpful. Stay tuned for more exciting tutorials!
About Me
Hi, I'm Kanishk Raj , A web developer passionate about creating interactive and user-friendly web applications. You can follow me on my social media for more tutorials and updates:
Comments
Post a Comment