Skip to content

Commit e38f8f2

Browse files
author
AzharSayyad
committed
QR Code Generator project added
1 parent d70169d commit e38f8f2

File tree

5 files changed

+197
-0
lines changed

5 files changed

+197
-0
lines changed

‎QR Code Generator/QrCode.png‎

44.1 KB
Loading

‎QR Code Generator/README.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# QR Code Generator
2+
3+
This is a simple QR code generator web application built using HTML, CSS, and JavaScript. It allows users to create QR codes for various purposes, such as sharing URLs, contact information, or any text-based information that can be encoded into a QR code. The application uses the [QR Code Generator](https://goqr.me/api/) API to generate QR codes.
4+
5+
![QR Code Generator Screenshot](qrCode.png)
6+
7+
## Features
8+
9+
- Generate QR codes for:
10+
- URLs
11+
- Text
12+
- Contact Information (vCard format)
13+
- Phone Numbers
14+
15+
16+
## Stack
17+
18+
- HTML
19+
- CSS
20+
- JavaScript
21+
22+
## Getting Started
23+
24+
To run this QR code generator on your local machine, follow these steps:
25+
26+
1. Clone this repository to your local machine:
27+
28+
2. Navigate to the project directory:
29+
30+
3. Open the `index.html` file in your web browser.
31+
32+
## Usage
33+
34+
1. Open the web application in your browser.
35+
36+
2. Choose the type of content you want to encode in the QR code (URL, Text, Contact, Phone).
37+
38+
3. Enter the content you want to encode in the provided input field.
39+
40+
4. Click the "Generate QR Code" button.
41+
42+
5. Your QR code will be displayed on the screen.
43+
44+
45+
## License
46+
47+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
48+
49+
## Acknowledgments
50+
51+
-The QR code generation is powered by the [QR Code Generator](https://goqr.me/api/) API.
52+
53+
## Author
54+
55+
- Ej
56+
57+
## Contact
58+
59+
If you have any questions or suggestions, please feel free to contact me at [[email protected]](mailto:[email protected]).
60+
61+
Happy QR code generating! 📲

‎QR Code Generator/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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>QR Code Generator</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<script src="index.js" defer></script>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<p>Enter text or URL</p>
13+
<input type="text" placeholder="Text or URL" id="qrText" />
14+
15+
<div id="imgBox">
16+
<img src="" id="qrImage" />
17+
</div>
18+
19+
<button onclick="generateQr()">Generate QR Code</button>
20+
</div>
21+
</body>
22+
</html>

‎QR Code Generator/index.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
let imgBox = document.getElementById("imgBox");
2+
let qrImage = document.getElementById("qrImage");
3+
let qrText = document.getElementById("qrText");
4+
5+
function generateQr() {
6+
if (qrText.value.length > 0) {
7+
qrImage.src =
8+
"https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" +
9+
qrText.value;
10+
11+
imgBox.classList.add("show-img");
12+
} else {
13+
qrText.classList.add("error");
14+
setTimeout(() => {
15+
qrText.classList.remove("error");
16+
}, 1000);
17+
}
18+
}

‎QR Code Generator/style.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
font-family: "Poppins", sans-serif;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
background-color: darkslateblue;
10+
}
11+
12+
.container {
13+
width: 400px;
14+
padding: 25px 35px;
15+
position: absolute;
16+
top: 50%;
17+
left: 50%;
18+
transform: translate(-50%, -50%);
19+
background: #fff;
20+
border-radius: 10px;
21+
}
22+
23+
.container p {
24+
font-weight: 600;
25+
font-size: 15px;
26+
margin-bottom: 8px;
27+
}
28+
29+
.container input {
30+
width: 100%;
31+
height: 50px;
32+
border: 1px solid #494eea;
33+
outline: 0;
34+
padding: 10px;
35+
margin: 10px 0 20px;
36+
border-radius: 5px;
37+
}
38+
39+
.container button {
40+
width: 100%;
41+
height: 50px;
42+
background: #494eea;
43+
color: #fff;
44+
border: 0;
45+
outline: 0;
46+
border-radius: 5px;
47+
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
48+
cursor: pointer;
49+
margin: 20px 0;
50+
font-weight: 500;
51+
}
52+
53+
.container button:hover {
54+
background: #3636a7;
55+
}
56+
57+
#imgBox {
58+
width: 200px;
59+
border-radius: 5px;
60+
max-height: 0;
61+
overflow: hidden;
62+
transition: max-height 1s ease-in;
63+
}
64+
65+
#imgBox img {
66+
width: 100%;
67+
padding: 10px;
68+
}
69+
70+
#imgBox.show-img {
71+
max-height: 300px;
72+
margin: 10px auto;
73+
border: 1px solid #3f4067;
74+
}
75+
76+
.error {
77+
animation: shake 0.1s linear 10;
78+
}
79+
80+
@keyframes shake {
81+
0% {
82+
transform: translateX(0);
83+
}
84+
25% {
85+
transform: translateX(-2px);
86+
}
87+
50% {
88+
transform: translateX(0);
89+
}
90+
75% {
91+
transform: translateX(2px);
92+
}
93+
100% {
94+
transform: translateX();
95+
}
96+
}

0 commit comments

Comments
 (0)