Skip to content

Commit afac522

Browse files
CodeTraversalCodeTraversal
authored
Add files via upload
1 parent 14710bb commit afac522

File tree

3 files changed

+191
-0
lines changed

3 files changed

+191
-0
lines changed

‎QR Code Generator/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>QR Code Generator | Code Traversal</title>
9+
</head>
10+
<body>
11+
<div class="box">
12+
<div class="qr-header">
13+
<h1>Generate QR Code</h1>
14+
<input type="text" placeholder="Type your text or URL" id="qr-text">
15+
<div>
16+
<label for="sizes">Select Size:</label>
17+
<select id="sizes">
18+
<option value="100">100x100</option>
19+
<option value="200">200x200</option>
20+
<option value="300">300x300</option>
21+
<option value="400">400x400</option>
22+
<option value="500">500x500</option>
23+
<option value="600">600x600</option>
24+
<option value="700">700x700</option>
25+
<option value="800">800x800</option>
26+
<option value="900">900x900</option>
27+
<option value="1000">1000x1000</option>
28+
</select>
29+
</div>
30+
</div>
31+
<div class="qr-body"></div>
32+
<div class="qr-footer">
33+
<a href="" id="generateBtn">Generate</a>
34+
<a href="" id="downloadBtn" download="QR_Code.png">Download</a>
35+
</div>
36+
</div>
37+
38+
<script src="script.js"></script>
39+
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
40+
</body>
41+
</html>

‎QR Code Generator/script.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
const qrText = document.getElementById('qr-text');
2+
const sizes = document.getElementById('sizes');
3+
const generateBtn = document.getElementById('generateBtn');
4+
const downloadBtn = document.getElementById('downloadBtn');
5+
const qrContainer = document.querySelector('.qr-body');
6+
7+
let size = sizes.value;
8+
generateBtn.addEventListener('click',(e)=>{
9+
e.preventDefault();
10+
isEmptyInput();
11+
});
12+
13+
sizes.addEventListener('change',(e)=>{
14+
size = e.target.value;
15+
isEmptyInput();
16+
});
17+
18+
downloadBtn.addEventListener('click', ()=>{
19+
let img = document.querySelector('.qr-body img');
20+
21+
if(img !== null){
22+
let imgAtrr = img.getAttribute('src');
23+
downloadBtn.setAttribute("href", imgAtrr);
24+
}
25+
else{
26+
downloadBtn.setAttribute("href", `${document.querySelector('canvas').toDataURL()}`);
27+
}
28+
});
29+
30+
function isEmptyInput(){
31+
// if(qrText.value.length > 0){
32+
// generateQRCode();
33+
// }
34+
// else{
35+
// alert("Enter the text or URL to generate your QR code");
36+
// }
37+
qrText.value.length > 0 ? generateQRCode() : alert("Enter the text or URL to generate your QR code");;
38+
}
39+
function generateQRCode(){
40+
qrContainer.innerHTML = "";
41+
new QRCode(qrContainer, {
42+
text:qrText.value,
43+
height:size,
44+
width:size,
45+
colorLight:"#fff",
46+
colorDark:"#000",
47+
});
48+
}
49+

‎QR Code Generator/style.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
:root{
2+
--bcg-color: #001122;
3+
--primary-color: #155e75;
4+
--border-radius: 8px;
5+
--secondary-color: #fff;
6+
--border-color: #7fb7c9;
7+
}
8+
*{
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
font-family: sans-serif;
13+
}
14+
15+
body{
16+
width: 100%;
17+
height: 100vh;
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
background-color: var(--bcg-color);
22+
}
23+
24+
.box{
25+
background-color: var(--primary-color);
26+
padding: 30px;
27+
width: 400px;
28+
border-radius: var(--border-radius);
29+
}
30+
31+
.qr-header h1{
32+
font-size: 26px;
33+
text-align: center;
34+
color: var(--secondary-color);
35+
margin-bottom: 24px;
36+
text-transform: uppercase;
37+
}
38+
39+
.qr-header input{
40+
width: 100%;
41+
margin-block: 12px;
42+
}
43+
44+
.qr-header input, select{
45+
padding: 8px;
46+
border-radius: var(--border-radius);
47+
font-size: 18px;
48+
outline: none;
49+
border: 2px solid var(--border-color);
50+
}
51+
52+
.qr-header label{
53+
color: var(--secondary-color);
54+
font-size: 20px;
55+
}
56+
57+
.qr-header div{
58+
display: flex;
59+
justify-content: space-between;
60+
}
61+
62+
.qr-footer{
63+
display: flex;
64+
justify-content: center;
65+
}
66+
.qr-footer a{
67+
background-color: var(--secondary-color);
68+
text-decoration: none;
69+
font-size: 20px;
70+
padding: 14px 36px;
71+
margin-inline: 2px;
72+
color: var(--primary-color);
73+
font-weight: 600;
74+
border-radius: var(--border-radius);
75+
}
76+
77+
.qr-body{
78+
display: grid;
79+
place-items: center;
80+
padding:20px;
81+
}
82+
83+
.qr-body img{
84+
max-width: 100%;
85+
max-height: 100%;
86+
margin-block: 10px;
87+
padding: 20px;
88+
border: 0.5px solid var(--border-color);
89+
border-radius: var(--border-radius);
90+
}
91+
92+
@media screen and (max-width:520px){
93+
.box{
94+
width: 80%;
95+
}
96+
.qr-footer a{
97+
padding: 12px;
98+
font-size: 16px;
99+
}
100+
}
101+

0 commit comments

Comments
 (0)