Skip to content

Commit 286b86d

Browse files
khushi-purwarkhushi-purwar
committed
added QR Code Generator
1 parent b14dd29 commit 286b86d

File tree

3 files changed

+144
-0
lines changed

3 files changed

+144
-0
lines changed

‎QR-CODE-Generator/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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</title>
9+
</head>
10+
<body>
11+
<h1>QR CODE GENERATOR</h1>
12+
<div class="main">
13+
<input type="text" name="" id="" class="input" placeholder="Enter text here...">
14+
<button class="btn">Generate</button>
15+
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgdnbx19IIBKvSAwARaGMfbl06_CnXNcV63g&usqp=CAU" alt="qrcode" class="code">
16+
<p id="note">Made with ♥ by Khushi</p>
17+
</div>
18+
19+
<div id="toast">Successfully Generated!!!</div>
20+
21+
<script src="script.js"></script>
22+
</body>
23+
</html>

‎QR-CODE-Generator/script.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const btn = document.querySelector('.btn');
2+
const code = document.querySelector('.code');
3+
const input = document.querySelector('.input');
4+
const toast = document.querySelector('#toast');
5+
6+
btn.addEventListener('click', generate);
7+
8+
function generate(){
9+
const data = input.value;
10+
const URL = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${data}`;
11+
code.src = URL;
12+
13+
toastDiv();
14+
}
15+
16+
function toastDiv(){
17+
toast.className = "show";
18+
setTimeout( function(){
19+
toast.className = toast.className.replace("show", "");
20+
} , 2000)
21+
}

‎QR-CODE-Generator/style.css

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body{
8+
width: 100%;
9+
height: 100vh;
10+
background:linear-gradient(to right top,#ff0f7b,#f89b29);
11+
display: flex;
12+
flex-direction: column;
13+
justify-content: center;
14+
align-items: center;
15+
}
16+
17+
h1 {
18+
font-size: 55px;
19+
text-shadow: 0 1px 0 #ccc,
20+
0 2px 0 #c9c9c9,
21+
0 3px 0 #bbb,
22+
0 4px 0 #b9b9b9,
23+
0 5px 0 #aaa,
24+
0 6px 1px rgba(0,0,0,.1),
25+
0 0 5px rgba(0,0,0,.1),
26+
0 1px 3px rgba(0,0,0,.3),
27+
0 3px 5px rgba(0,0,0,.2),
28+
0 5px 10px rgba(0,0,0,.25),
29+
0 10px 10px rgba(0,0,0,.2),
30+
0 20px 20px rgba(0,0,0,.15);
31+
}
32+
33+
.main {
34+
width: 25%;
35+
height: 70%;
36+
padding: 50px 15px;
37+
display: flex;
38+
justify-content: center;
39+
align-items: center;
40+
flex-direction: column;
41+
background: #fff;
42+
box-shadow: 0 10px 25px -10px rgba(0,0,0,0.5);
43+
border-radius: 5px;
44+
margin-top: 25px;
45+
margin-bottom: 40px;
46+
}
47+
48+
.main .input {
49+
width: 90%;
50+
padding: 8px 25px;
51+
border: 3px solid #9e9e9e;
52+
outline: none;
53+
margin: 15px 0;
54+
}
55+
.main .input:focus {
56+
border: 3px solid #f89b29;
57+
}
58+
.btn ,.input {
59+
font-size:1.1rem;
60+
border-radius: 5px;
61+
}
62+
.main .btn {
63+
width: 90%;
64+
padding: 12px 0;
65+
outline: none;
66+
border:none;
67+
border-radius: 5px;
68+
background: #f89b29;
69+
color: #fff;
70+
transition: 0.3s;
71+
}
72+
.main .code {
73+
margin: 10px 0;
74+
}
75+
76+
77+
78+
.main .btn:hover {
79+
box-shadow: 0 10px 25px -10px #f89b29;
80+
}
81+
82+
#toast {
83+
position: absolute;
84+
bottom: 0;
85+
border-radius: 5px;
86+
padding: 10px 50px;
87+
background: #07f49e;
88+
opacity: 0;
89+
visibility: hidden;
90+
box-shadow: 0 10px 25px -10px #07f49e;
91+
transition: 0.3s;
92+
93+
font-size: 20px;
94+
}
95+
96+
#toast.show {
97+
visibility: visible;
98+
opacity: 1;
99+
bottom: 50px;
100+
}

0 commit comments

Comments
 (0)