Responsive QR Code Generator: HTML, CSS, JavaScript
Introduction:
In this guide, we will explore the process of creating a QR code generator using HTML, CSS, and JavaScript. Users will be able to input different types of information, such as URLs or phone numbers, and the generator will instantly create a corresponding QR code. This tutorial will teach you how to customize QR codes for your own website or application.
Understanding QR Codes:
QR codes are special codes that can store different kinds of information. They look like square patterns made up of black and white squares. When you use a phone or a tablet to scan a QR code, it can show you things like website links, messages, or contact details.
QR codes are helpful because they make it easy to share information. Instead of typing long web addresses or copying text, you can just scan a QR code to see the information right away. This can be useful when you want to learn more about a product, get a special offer, or quickly save someone's contact details.
Source Code
<!DOCTYPE html>
<html>
<head>
<title>QR Code Generator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
padding: 20px;
}
.container {
max-width: 400px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"] {
width: 100%;
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
box-sizing: border-box; /* Add this line to fix the alignment issue */
}
button {
width: 100%;
padding: 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
#qrcode {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>QR Code Generator</h2>
<div class="form-group">
<label for="data">Data:</label>
<input type="text" id="data" placeholder="Enter data for QR code" required>
</div>
<button onclick="generateQRCode()">Generate</button>
<div id="qrcode"></div>
</div>
<script>
function generateQRCode() {
var data = document.getElementById("data").value.trim();
var qrCodeElement = document.getElementById("qrcode");
// Clear existing QR code if any
qrCodeElement.innerHTML = "";
// Generate the QR code using the entered data
var imageUrl = "https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=" + encodeURIComponent(data);
var img = document.createElement("img");
img.src = imageUrl;
qrCodeElement.appendChild(img);
}
</script>
</body>
</html>
Below is a step-by-step explanation of each line of code.
This line declares the document type as HTML5.
<!DOCTYPE html>
<html>
The <head> section contains metadata and resources for the document. It includes the <title> element that sets the title of the web page and the <style> block for adding CSS styles.
<head>
<title>QR Code Generator</title>
<style>
/* CSS styles */
</style>
</head>
The <body> tag marks the beginning of the document's body section where the visible content of the web page resides.
This section creates a container <div> with a class of "container". Inside it, we have an <h2> heading for the title, a <div> with a class of "form-group" to group form elements, a <label> for the input field, an <input> field of type "text" with an id of "data" for entering data, a "Generate" <button> with an onclick attribute that triggers the generateQRCode() function, and an empty <div> with an id of "qrcode" where the generated QR code will be displayed.
<div class="container">
<h2>QR Code Generator</h2>
<div class="form-group">
<label for="data">Data:</label>
<input type="text" id="data" placeholder="Enter data for QR code" required>
</div>
<button onclick="generateQRCode()">Generate</button>
<div id="qrcode"></div>
</div>This <script> block contains the JavaScript code responsible for generating the QR code. The generateQRCode() function is called when the "Generate" button is clicked. It retrieves the entered data from the input field, clears any existing QR code, generates the URL for the QR code using the Google Charts API, creates an <img> element with the QR code URL as the source, and appends it to the <div> with the id "qrcode".
These closing tags mark the end of the HTML document, closing the <body> and <html> sections..
</body>
</html>That's it. Congratulation you have successfully developed QR Code generator tool.
Comments
Post a Comment