Skip to content

Commit 8c9c0d1

Browse files
FaizanMalik-JavaDeveloperFaizanMalik-JavaDeveloper
authored
Add files via upload
0 parents  commit 8c9c0d1

4 files changed

Lines changed: 227 additions & 0 deletions

File tree

‎icon.png‎

63 KB
Loading

‎index.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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>JavaScript Mini Projects</title>
7+
8+
<link rel="stylesheet" href="style.css" />
9+
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
11+
</head>
12+
<body>
13+
<div class="container">
14+
<h1>JavaScript Mini Projects</h1>
15+
16+
<p class="author">Created & Developed by Faizan Malik</p>
17+
18+
<!-- Poll Project -->
19+
20+
<div class="card">
21+
<h2>JavaScript Poll</h2>
22+
23+
<h3 id="heading">Is JavaScript Easy?</h3>
24+
25+
<div class="btn-group">
26+
<button class="yes" id="yesBtn">Yes</button>
27+
28+
<button class="no" id="noBtn">No</button>
29+
</div>
30+
</div>
31+
32+
<!-- QR Generator -->
33+
34+
<div class="card">
35+
<h2>QR Code Generator</h2>
36+
37+
<input type="text" id="qrText" placeholder="Enter URL or Text" />
38+
39+
<button class="generate-btn" onclick="generateQRCode()">
40+
Generate QR Code
41+
</button>
42+
43+
<div id="qrcode"></div>
44+
</div>
45+
</div>
46+
47+
<script src="script.js"></script>
48+
</body>
49+
</html>

‎script.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// ======================
2+
// POLL PROJECT
3+
// ======================
4+
5+
document.getElementById("yesBtn").onclick = function () {
6+
document.getElementById("heading").innerHTML =
7+
"Yes! JavaScript Is Easy If You Practice Daily.";
8+
};
9+
10+
document.getElementById("noBtn").onclick = function () {
11+
document.getElementById("heading").innerHTML =
12+
"JavaScript Feels Difficult Without Practice.";
13+
};
14+
15+
// ======================
16+
// QR CODE GENERATOR
17+
// ======================
18+
19+
function generateQRCode() {
20+
const text = document.getElementById("qrText").value;
21+
22+
const qrContainer = document.getElementById("qrcode");
23+
24+
qrContainer.innerHTML = "";
25+
26+
if (text.trim() !== "") {
27+
new QRCode(qrContainer, {
28+
text: text,
29+
width: 180,
30+
height: 180,
31+
});
32+
} else {
33+
alert("Please Enter Text or URL");
34+
}
35+
}

‎style.css‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: Arial, Helvetica, sans-serif;
6+
}
7+
8+
body {
9+
min-height: 100vh;
10+
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
15+
background: linear-gradient(135deg, #4f46e5, #7c3aed, #9333ea);
16+
17+
color: white;
18+
}
19+
20+
.container {
21+
width: 90%;
22+
max-width: 800px;
23+
24+
display: flex;
25+
flex-direction: column;
26+
27+
justify-content: center;
28+
align-items: center;
29+
30+
gap: 25px;
31+
}
32+
33+
.container h1 {
34+
font-size: 3rem;
35+
text-align: center;
36+
}
37+
38+
.author {
39+
font-size: 18px;
40+
color: #e2e8f0;
41+
letter-spacing: 1px;
42+
margin-bottom: 10px;
43+
}
44+
45+
.card {
46+
width: 100%;
47+
48+
background: rgba(255, 255, 255, 0.12);
49+
50+
backdrop-filter: blur(15px);
51+
52+
border: 1px solid rgba(255, 255, 255, 0.2);
53+
54+
border-radius: 25px;
55+
56+
padding: 30px;
57+
58+
text-align: center;
59+
60+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
61+
}
62+
63+
.card h2 {
64+
margin-bottom: 20px;
65+
}
66+
67+
.card h3 {
68+
margin-bottom: 20px;
69+
}
70+
71+
.btn-group {
72+
display: flex;
73+
justify-content: center;
74+
gap: 15px;
75+
}
76+
77+
button {
78+
padding: 12px 25px;
79+
80+
border: none;
81+
82+
border-radius: 12px;
83+
84+
cursor: pointer;
85+
86+
font-size: 16px;
87+
88+
font-weight: bold;
89+
90+
transition: 0.3s;
91+
}
92+
93+
button:hover {
94+
transform: translateY(-4px);
95+
}
96+
97+
.yes {
98+
background: #22c55e;
99+
color: white;
100+
}
101+
102+
.no {
103+
background: #ef4444;
104+
color: white;
105+
}
106+
107+
.generate-btn {
108+
background: #38bdf8;
109+
color: white;
110+
111+
margin-top: 15px;
112+
}
113+
114+
input {
115+
width: 100%;
116+
117+
padding: 12px;
118+
119+
border: none;
120+
121+
border-radius: 12px;
122+
123+
outline: none;
124+
125+
font-size: 16px;
126+
}
127+
128+
#qrcode {
129+
margin-top: 25px;
130+
131+
display: flex;
132+
justify-content: center;
133+
}
134+
135+
@media (max-width: 768px) {
136+
.container h1 {
137+
font-size: 2rem;
138+
}
139+
140+
.btn-group {
141+
flex-direction: column;
142+
}
143+
}

0 commit comments

Comments
 (0)