Skip to content

Commit 2563fae

Browse files
Shreekant-04Shreekant-04
committed
final changes made
1 parent a320337 commit 2563fae

File tree

3 files changed

+148
-91
lines changed

3 files changed

+148
-91
lines changed

‎QrCode/index.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,13 @@ <h1>QR Code Generator</h1>
2323
/>
2424
<input type="submit" value="Generate QR Code" />
2525
<button type="button" class="clear">Clear</button>
26+
<button class="large">Enlarge</button>
2627
</form>
2728
<br />
28-
<div id="qr-code"></div>
29-
<a id="open-data-url" href="#" target="_blank">View QR Code in New Tab</a>
29+
<section class="qr-section">
30+
<div id="qr-code"></div>
31+
<a id="open-data-url" href="#" target="_blank">Download Qr code</a>
32+
</section>
3033
</main>
3134
<script src="script.js"></script>
3235
</body>

‎QrCode/script.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,3 +64,11 @@ function clearQrCode() {
6464

6565
// Event Listener to clear the QR code
6666
clear.addEventListener("click", clearQrCode);
67+
document.querySelector(".large").addEventListener("focus", () => {
68+
document.querySelector(".qr-section").style.transform = "scale(1.7)";
69+
qrGenerationForm.style.transform = "translateX(-100px)";
70+
});
71+
document.querySelector(".large").addEventListener("blur", () => {
72+
document.querySelector(".qr-section").style.transform = "scale(1)";
73+
qrGenerationForm.style.transform = "translateX(0)";
74+
});

‎QrCode/style.css

Lines changed: 135 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,137 @@
11
/* General Reset */
22
* {
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-
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+
display: flex;
15+
flex-direction: column;
16+
min-height: 100vh;
17+
}
18+
19+
/* Header */
20+
header {
21+
background: #333;
22+
color: #fff;
23+
padding: 1rem;
24+
text-align: center;
25+
flex-shrink: 0;
26+
}
27+
28+
/* Main Section */
29+
main {
30+
display: flex;
31+
align-items: center;
32+
justify-content: center;
33+
padding: 2rem;
34+
flex-grow: 1;
35+
overflow: auto;
36+
gap: 10px;
37+
transition: 0.3s;
38+
flex-wrap: wrap;
39+
}
40+
41+
/* Form Styling */
42+
#qr-generation-form {
43+
display: flex;
44+
flex-direction: column;
45+
align-items: center;
46+
background: #fff;
47+
padding: 1.5rem;
48+
border-radius: 8px;
49+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
50+
transition: 0.2s;
51+
}
52+
53+
/* Input Fields */
54+
#qr-content {
55+
padding: 0.75rem;
56+
margin-bottom: 1rem;
57+
border: 1px solid #ddd;
58+
border-radius: 4px;
59+
width: 100%;
60+
max-width: 300px;
61+
}
62+
63+
/* Buttons */
64+
input[type="submit"],
65+
.clear {
66+
padding: 0.75rem 1.5rem;
67+
border: none;
68+
border-radius: 4px;
69+
cursor: pointer;
70+
background-color: #007bff;
71+
color: #fff;
72+
font-size: 1rem;
73+
margin: 0.5rem;
74+
transition: background-color 0.3s;
75+
}
76+
77+
input[type="submit"]:hover,
78+
.clear:hover {
79+
background-color: #0056b3;
80+
}
81+
82+
/* Clear Button */
83+
.clear {
84+
background-color: #dc3545;
85+
}
86+
87+
.clear:hover {
88+
background-color: #c82333;
89+
}
90+
91+
/* QR Code Container */
92+
#qr-code {
93+
width: 280px;
94+
height: 280px;
95+
display: flex;
96+
justify-content: center;
97+
align-items: center;
98+
background-color: #fff;
99+
border: 1px solid #ddd;
100+
border-radius: 8px;
101+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
102+
transition: 0.2s;
103+
}
104+
105+
/* Enlarge Button */
106+
.large {
107+
padding: 0.75rem 1.5rem;
108+
border: none;
109+
border-radius: 4px;
110+
cursor: pointer;
111+
background-color: #28a745;
112+
color: #fff;
113+
font-size: 1rem;
114+
margin: 0.5rem;
115+
transition: background-color 0.3s;
116+
}
117+
118+
.large:hover {
119+
background-color: #218838;
120+
}
121+
.qr-section {
122+
margin-top: 2rem;
123+
transition: 0.2s;
124+
display: flex;
125+
flex-direction: column;
126+
}
127+
128+
a#open-data-url {
129+
margin-top: 1rem;
130+
color: #007bff;
131+
text-decoration: none;
132+
text-align: center;
133+
}
134+
135+
a#open-data-url:hover {
136+
text-decoration: underline;
137+
}

0 commit comments

Comments
 (0)