Skip to content

Commit 69081be

Browse files
harshita2216harshita2216
authored
Merge pull request #312 from khushi-purwar/d-khushi
Added QR Code Generator
2 parents 6fb82f3 + 7f2ee28 commit 69081be

File tree

8 files changed

+182
-0
lines changed

8 files changed

+182
-0
lines changed

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,4 +118,5 @@
118118
| [iCoder](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/iCoder) |It is a simple and resonsive website made using bootstrap.
119119
| [Darkmode To Do List](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/darkmode_todolist) |This app allows you to make a list of events you want to do and you can strikeout the events completed.|
120120
| [Tabla](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/tabla) | It is a webapp that plays tabla beat on clicked on the tabla or clicked d or t.
121+
| [QR Code Generator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/QR-CODE-Generator) | A simple web application which will generate a QR Code.
121122
| [Classifiers using JS](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Classifier-Using-JS) | It is a website which contains three different classifiers, built with the help of API.

‎QR-CODE-Generator/README.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# QR Code Generator
2+
3+
## About The Project
4+
5+
A simple web application which will generate a QR Code.
6+
7+
## Tech Stacks Used
8+
9+
10+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
11+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
12+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
13+
14+
## API Used
15+
16+
Visit Website: https://goqr.me/api/
17+
18+
## How to use Project
19+
20+
21+
- Download or clone the repository
22+
23+
```
24+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
25+
```
26+
27+
- Go to the directory
28+
- Run the index.html file
29+
30+
31+
## Screenshots
32+
33+
<img src="./Screenshots/ss1.png" />
34+
35+
<br><br>
36+
After clicking on Generate Button, UI looks like:
37+
38+
<img src="./Screenshots/ss2.png" />
39+
40+
41+
## Live Demo
42+
43+
<img src="./Screenshots/demo.gif" />

‎QR-CODE-Generator/Screenshots/demo.gif

1.21 MB
Loading

‎QR-CODE-Generator/Screenshots/ss1.png

1000 KB
Loading

‎QR-CODE-Generator/Screenshots/ss2.png

841 KB
Loading

‎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+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<title>QR Code Generator</title>
10+
</head>
11+
12+
<body>
13+
<h1>QR CODE GENERATOR</h1>
14+
<div class="main">
15+
<input type="text" name="" id="" class="input" placeholder="Enter text here...">
16+
<button class="btn">Generate</button> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgdnbx19IIBKvSAwARaGMfbl06_CnXNcV63g&usqp=CAU" alt="qrcode" class="code">
17+
<p id="note">Made with ♥ by Khushi</p>
18+
</div>
19+
<div id="toast">Successfully Generated!!!</div>
20+
<script src="script.js"></script>
21+
</body>
22+
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: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
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, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9,
20+
0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1),
21+
0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2),
22+
0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2),
23+
0 20px 20px rgba(0, 0, 0, 0.15);
24+
}
25+
26+
.main {
27+
width: 25%;
28+
height: 70%;
29+
padding: 50px 15px;
30+
display: flex;
31+
justify-content: center;
32+
align-items: center;
33+
flex-direction: column;
34+
background: #fff;
35+
box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.5);
36+
border-radius: 5px;
37+
margin-top: 25px;
38+
margin-bottom: 40px;
39+
}
40+
41+
.main .input {
42+
width: 90%;
43+
padding: 8px 25px;
44+
border: 3px solid #9e9e9e;
45+
outline: none;
46+
margin: 15px 0;
47+
}
48+
.main .input:focus {
49+
border: 3px solid #f89b29;
50+
}
51+
.btn,
52+
.input {
53+
font-size: 1.1rem;
54+
border-radius: 5px;
55+
}
56+
.main .btn {
57+
width: 90%;
58+
padding: 12px 0;
59+
outline: none;
60+
border: none;
61+
border-radius: 5px;
62+
background: #f89b29;
63+
color: #fff;
64+
transition: 0.3s;
65+
}
66+
.main .code {
67+
margin: 10px 0;
68+
}
69+
70+
.main .btn:hover {
71+
box-shadow: 0 10px 25px -10px #f89b29;
72+
}
73+
74+
#toast {
75+
position: absolute;
76+
bottom: 0;
77+
border-radius: 5px;
78+
padding: 10px 50px;
79+
background: #07f49e;
80+
opacity: 0;
81+
visibility: hidden;
82+
box-shadow: 0 10px 25px -10px #07f49e;
83+
transition: 0.3s;
84+
85+
font-size: 20px;
86+
}
87+
88+
#toast.show {
89+
visibility: visible;
90+
opacity: 1;
91+
bottom: 50px;
92+
}
93+
94+

0 commit comments

Comments
 (0)