Skip to content

Commit aba177f

Browse files
Kumar-Ankit56Kumar-Ankit56
authored
Adding project file
1 parent 48af8ae commit aba177f

File tree

3 files changed

+155
-0
lines changed

3 files changed

+155
-0
lines changed

‎Qr_code_generator/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+
<title>Qr Code generator</title>
8+
<link rel="stylesheet" href="./style.css">
9+
</head>
10+
<body>
11+
<div class="wrapper">
12+
<header>
13+
<h1>Qr Generator</h1>
14+
<p>Paste a url or enter text to create a Qr code</p>
15+
</header>
16+
<div class="form">
17+
<input type="text" spellcheck="false" placeholder="Enter text and url">
18+
<button>Genertor Qr Code</button>
19+
</div>
20+
<div class="qr-code">
21+
<img src="" alt="qr-code">
22+
</div>
23+
</div>
24+
<script src="./script.js"></script>
25+
</body>
26+
</html>

‎Qr_code_generator/script.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const wrapper = document.querySelector(".wrapper"),
2+
qrInput = wrapper.querySelector(".form input"),
3+
generateBtn = wrapper.querySelector(".form button"),
4+
qrImg = wrapper.querySelector(".qr-code img");
5+
let preValue;
6+
7+
generateBtn.addEventListener("click", () => {
8+
let qrValue = qrInput.value.trim();
9+
if(!qrValue || preValue === qrValue) return;
10+
preValue = qrValue;
11+
generateBtn.innerText = "Generating QR Code...";
12+
qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`;
13+
qrImg.addEventListener("load", () => {
14+
wrapper.classList.add("active");
15+
generateBtn.innerText = "Generate QR Code";
16+
});
17+
});
18+
19+
qrInput.addEventListener("keyup", () => {
20+
if(!qrInput.value.trim()) {
21+
wrapper.classList.remove("active");
22+
preValue = "";
23+
}
24+
});

‎Qr_code_generator/style.css

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: sans-serif;
6+
}
7+
8+
body{
9+
display: flex;
10+
padding: 0 10px;
11+
min-height: 100vh;
12+
align-items: center;
13+
background: #090221;
14+
justify-content: center;
15+
}
16+
17+
.wrapper{
18+
height: 265px;
19+
max-width: 410px;
20+
background: #fff;
21+
border-radius: 7px;
22+
padding: 20px 25px 0;
23+
transition: height 0.2s ease;
24+
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
25+
}
26+
27+
.wrapper.active{
28+
height: 530px;
29+
}
30+
header h1{
31+
font-size: 21px;
32+
font-weight: 500;
33+
text-align: center;
34+
}
35+
header p{
36+
margin-top: 5px;
37+
color: #575757;
38+
font-size: 16px;
39+
}
40+
.wrapper .form{
41+
margin: 20px 0 25px;
42+
}
43+
.form :where(input,button){
44+
width: 100%;
45+
height: 55px;
46+
border: none;
47+
outline: none;
48+
border-radius: 5px;
49+
transition: 0.1s ease;
50+
}
51+
.form input{
52+
font-size: 18px;
53+
padding: 0 17px;
54+
border: 1px solid #999;
55+
}
56+
.form input:focus{
57+
box-shadow: 0 3px 6px rgba(0,0,0,0.13);
58+
}
59+
.form input::placeholder{
60+
color: #999;
61+
}
62+
.form button{
63+
color: #fff;
64+
cursor: pointer;
65+
margin-top: 20px;
66+
font-size: 15px;
67+
background: #090221;
68+
border-radius: 5px;
69+
}
70+
.qr-code{
71+
opacity: 0;
72+
display: flex;
73+
padding: 33px 0;
74+
border-radius: 5px;
75+
align-items: center;
76+
pointer-events: none;
77+
justify-content: center;
78+
border: 1px solid #ccc;
79+
}
80+
.wrapper.active .qr-code{
81+
opacity: 1;
82+
pointer-events: auto;
83+
transition: opacity 0.5s 0.05s ease;
84+
}
85+
.qr-code img{
86+
width: 170px;
87+
}
88+
@media screen and (max-width:430px) {
89+
.wrapper{
90+
height: 255px;
91+
padding: 16px 20px;
92+
}
93+
.wrapper.active{
94+
height: 510px;
95+
}
96+
header p{
97+
color: #696969;
98+
}
99+
.form:where(input,button){
100+
height: 52px;
101+
}
102+
.qr-code img{
103+
width: 160px;
104+
}
105+
}

0 commit comments

Comments
 (0)