Skip to content

Commit a320337

Browse files
Shreekant-04Shreekant-04
committed
Qr code generator added
1 parent cdb424a commit a320337

File tree

5 files changed

+202
-0
lines changed

5 files changed

+202
-0
lines changed

‎QrCode/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>QR Code Generator with Background</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
9+
<link rel="shortcut icon" href="/time-management.ico" type="image/x-icon" />
10+
</head>
11+
<body>
12+
<header>
13+
<h1>QR Code Generator</h1>
14+
</header>
15+
<main>
16+
<form action="/" id="qr-generation-form">
17+
<input
18+
type="text"
19+
name="qr-code-content"
20+
id="qr-content"
21+
placeholder="Enter QR content"
22+
autocomplete="off"
23+
/>
24+
<input type="submit" value="Generate QR Code" />
25+
<button type="button" class="clear">Clear</button>
26+
</form>
27+
<br />
28+
<div id="qr-code"></div>
29+
<a id="open-data-url" href="#" target="_blank">View QR Code in New Tab</a>
30+
</main>
31+
<script src="script.js"></script>
32+
</body>
33+
</html>

‎QrCode/script.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
let qrContentInput = document.getElementById("qr-content");
2+
let qrGenerationForm = document.getElementById("qr-generation-form");
3+
let qrCodeContainer = document.getElementById("qr-code");
4+
let qrCode;
5+
let clear = document.querySelector(".clear");
6+
7+
function generateQrCode(qrContent) {
8+
qrCodeContainer.innerHTML = "";
9+
let canvas = document.createElement("canvas");
10+
canvas.width = 280;
11+
canvas.height = 280;
12+
let ctx = canvas.getContext("2d");
13+
14+
// Draw the background color
15+
ctx.fillStyle = "#ffffff"; // Set your desired background color
16+
ctx.fillRect(0, 0, canvas.width, canvas.height);
17+
18+
// Generate the QR code and draw it on the canvas
19+
qrCode = new QRCode(document.createElement("div"), {
20+
text: qrContent,
21+
width: 256,
22+
height: 256,
23+
colorDark: "#000000",
24+
colorLight: "#ffffff",
25+
correctLevel: QRCode.CorrectLevel.H,
26+
});
27+
28+
// Wait until the QR code is generated and then draw it on the canvas
29+
setTimeout(() => {
30+
let qrCanvas = qrCode._oDrawing._elCanvas;
31+
32+
// Calculate the position to center the QR code
33+
let x = (canvas.width - 256) / 2;
34+
let y = (canvas.height - 256) / 2;
35+
36+
// Draw the QR code at the calculated position
37+
ctx.drawImage(qrCanvas, x, y);
38+
39+
// Convert the canvas to a Data URL
40+
const dataUrl = canvas.toDataURL("image/png");
41+
42+
// Update the href attribute of the <a> tag
43+
const link = document.getElementById("open-data-url");
44+
link.setAttribute("href", dataUrl);
45+
link.textContent = "View QR Code in New Tab";
46+
}, 100);
47+
48+
// Append the canvas to the QR code container
49+
qrCodeContainer.appendChild(canvas);
50+
}
51+
52+
// Event listener for form submit event
53+
qrGenerationForm.addEventListener("submit", function (event) {
54+
// Prevent form submission
55+
event.preventDefault();
56+
let qrContent = qrContentInput.value;
57+
generateQrCode(qrContent);
58+
});
59+
60+
// Function to clear the QR code
61+
function clearQrCode() {
62+
qrCodeContainer.innerHTML = ""; // Clear the QR code container
63+
}
64+
65+
// Event Listener to clear the QR code
66+
clear.addEventListener("click", clearQrCode);

‎QrCode/style.css

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/* General Reset */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
/* Body and Font */
9+
body {
10+
font-family: Arial, sans-serif;
11+
line-height: 1.6;
12+
background-color: #f4f4f4;
13+
color: #333;
14+
}
15+
16+
/* Header */
17+
header {
18+
background: #333;
19+
color: #fff;
20+
padding: 1rem;
21+
text-align: center;
22+
}
23+
24+
/* Main Section */
25+
main {
26+
display: flex;
27+
flex-direction: column;
28+
align-items: center;
29+
padding: 2rem;
30+
}
31+
32+
/* Form Styling */
33+
#qr-generation-form {
34+
display: flex;
35+
flex-direction: column;
36+
align-items: center;
37+
background: #fff;
38+
padding: 1.5rem;
39+
border-radius: 8px;
40+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
41+
}
42+
43+
/* Input Fields */
44+
#qr-content {
45+
padding: 0.75rem;
46+
margin-bottom: 1rem;
47+
border: 1px solid #ddd;
48+
border-radius: 4px;
49+
width: 100%;
50+
max-width: 300px;
51+
}
52+
53+
/* Buttons */
54+
input[type="submit"], .clear {
55+
padding: 0.75rem 1.5rem;
56+
border: none;
57+
border-radius: 4px;
58+
cursor: pointer;
59+
background-color: #007bff;
60+
color: #fff;
61+
font-size: 1rem;
62+
margin: 0.5rem;
63+
}
64+
65+
input[type="submit"]:hover, .clear:hover {
66+
background-color: #0056b3;
67+
}
68+
69+
/* Clear Button */
70+
.clear {
71+
background-color: #dc3545;
72+
}
73+
74+
.clear:hover {
75+
background-color: #c82333;
76+
}
77+
78+
/* QR Code Container */
79+
#qr-code {
80+
margin-top: 1.5rem;
81+
width: 280px;
82+
height: 280px;
83+
display: flex;
84+
justify-content: center;
85+
align-items: center;
86+
background-color: #fff;
87+
border: 1px solid #ddd;
88+
border-radius: 8px;
89+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
90+
}
91+

‎README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,5 +258,10 @@
258258
<td><a href="ArithemeticGame">Arithmetic Game </a></td>
259259
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/ArithemeticGame/">Link</a></td>
260260
</tr>
261+
<tr>
262+
<td>50</td>
263+
<td><a href="QrCode">Qr Code Generator </a></td>
264+
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/QrCode/">Link</a></td>
265+
</tr>
261266
</tbody>
262267
</table>

‎index.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -371,6 +371,13 @@
371371
<a href="./ArithemeticGame/" target="_blank">Link</a>
372372
</td>
373373
</tr>
374+
<tr>
375+
<td>50</td>
376+
<td>QR code Generator</td>
377+
<td>
378+
<a href="./QrCode/" target="_blank">Link</a>
379+
</td>
380+
</tr>
374381
</tbody>
375382
</table>
376383
</body>

0 commit comments

Comments
 (0)