Skip to content

Commit f405cc8

Browse files
Moiz-CodeByteMoiz-CodeByte
committed
Add QR Code Generator project with JavaScript, CSS, and HTML files
1 parent 47f14a5 commit f405cc8

7 files changed

Lines changed: 239 additions & 0 deletions

File tree

‎Day #15 - QR Code Generator/README.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Day #15
2+
3+
# QR Code Generator
4+
5+
## Table of Contents
6+
- [Introduction](#introduction)
7+
- [Features](#features)
8+
- [Getting Started](#getting-started)
9+
- [Usage](#usage)
10+
- [Contributing](#contributing)
11+
- [License](#license)
12+
- [Live Demo](#live-demo)
13+
14+
## Introduction
15+
The **QR Code Generator** is a simple web tool that converts text or URLs into QR codes instantly. It is useful for quickly sharing links, messages, and other text data.
16+
17+
## Features
18+
- Generate QR code from any text or URL
19+
- Clean and responsive interface
20+
- Download generated QR code as an image
21+
- Keyboard shortcut support: `Ctrl + Enter` / `Cmd + Enter`
22+
23+
## Getting Started
24+
25+
### Installation
26+
1. Clone the repository:
27+
```bash
28+
git clone https://github.com/Moiz-CodeByte/100-days-of-javascript.git
29+
```
30+
2. Navigate to the project directory:
31+
```bash
32+
cd Day\ \#15\ -\ QR\ Code\ Generator
33+
```
34+
3. Open `index.html` in your web browser.
35+
36+
## Usage
37+
1. Enter text or a URL in the input box.
38+
2. Click **Generate QR Code**.
39+
3. Download the QR image using the **Download QR** button.
40+
41+
## Contributing
42+
Contributions are welcome! If you have ideas, suggestions, or improvements, feel free to open an issue or create a pull request.
43+
44+
### Steps to Contribute
45+
1. Fork the repository.
46+
2. Create a new branch:
47+
```bash
48+
git checkout -b feature/your-feature-name
49+
```
50+
3. Make your changes and commit them:
51+
```bash
52+
git commit -m "Add your feature"
53+
```
54+
4. Push your branch:
55+
```bash
56+
git push origin feature/your-feature-name
57+
```
58+
5. Open a pull request.
59+
60+
## License
61+
This project is open-source and available under the [MIT License](../LICENSE).
62+
63+
## Live Demo
64+
You can see the QR Code Generator live at [Link](https://moiz-codebyte.github.io/100-days-of-javascript/Day%20%2315%20-%20QR%20Code%20Generator/)
65+
66+
For any questions or support, please contact at [hello@abdulmoiz.net](mailto:hello@abdulmoiz.net).

‎Day #15 - QR Code Generator/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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+
</head>
9+
<body>
10+
<main class="card">
11+
<h1>QR Code Generator</h1>
12+
13+
<label for="qrInput">Enter text or URL</label>
14+
<textarea id="qrInput" rows="4" placeholder="https://example.com"></textarea>
15+
16+
<button id="generateBtn" type="button">Generate QR Code</button>
17+
18+
<div class="preview" id="preview">
19+
<img id="qrImage" alt="Generated QR Code">
20+
</div>
21+
22+
<a id="downloadBtn" class="download" download="qrcode.png">Download QR</a>
23+
<p id="message" aria-live="polite"></p>
24+
</main>
25+
26+
<script src="script.js"></script>
27+
</body>
28+
</html>

‎Day #15 - QR Code Generator/screenshot.png‎

27.1 KB
Loading

‎Day #15 - QR Code Generator/script.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
const qrInput = document.getElementById("qrInput");
2+
const generateBtn = document.getElementById("generateBtn");
3+
const qrImage = document.getElementById("qrImage");
4+
const downloadBtn = document.getElementById("downloadBtn");
5+
const message = document.getElementById("message");
6+
7+
function clearQR() {
8+
qrImage.style.display = "none";
9+
qrImage.removeAttribute("src");
10+
downloadBtn.classList.remove("active");
11+
downloadBtn.removeAttribute("href");
12+
}
13+
14+
function generateQR() {
15+
const value = qrInput.value.trim();
16+
17+
if (!value) {
18+
clearQR();
19+
message.textContent = "Please enter text or a URL.";
20+
return;
21+
}
22+
23+
const encoded = encodeURIComponent(value);
24+
const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encoded}`;
25+
26+
qrImage.src = qrUrl;
27+
qrImage.style.display = "block";
28+
downloadBtn.href = qrUrl;
29+
downloadBtn.classList.add("active");
30+
message.textContent = "QR code generated.";
31+
}
32+
33+
generateBtn.addEventListener("click", generateQR);
34+
35+
qrInput.addEventListener("keydown", (event) => {
36+
if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
37+
generateQR();
38+
}
39+
});
40+
41+
clearQR();
42+
message.textContent = "Enter text and click Generate QR Code.";

‎Day #15 - QR Code Generator/style.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
margin: 0;
7+
min-height: 100vh;
8+
display: grid;
9+
place-items: center;
10+
background: #f7592b;
11+
font-family: Arial, sans-serif;
12+
padding: 16px;
13+
}
14+
15+
.card {
16+
width: 100%;
17+
max-width: 440px;
18+
background: #fff;
19+
border-radius: 14px;
20+
padding: 24px;
21+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.14);
22+
}
23+
24+
h1 {
25+
margin: 0 0 16px;
26+
text-align: center;
27+
}
28+
29+
label {
30+
display: block;
31+
font-weight: 700;
32+
margin-bottom: 8px;
33+
}
34+
35+
textarea {
36+
width: 100%;
37+
resize: vertical;
38+
border: 1px solid #d5d5d5;
39+
border-radius: 10px;
40+
padding: 10px;
41+
font-size: 14px;
42+
margin-bottom: 12px;
43+
}
44+
45+
button,
46+
.download {
47+
width: 100%;
48+
border: 0;
49+
border-radius: 10px;
50+
padding: 11px 14px;
51+
font-weight: 700;
52+
cursor: pointer;
53+
text-align: center;
54+
text-decoration: none;
55+
display: inline-block;
56+
}
57+
58+
button {
59+
background: #f7592b;
60+
color: #fff;
61+
margin-bottom: 14px;
62+
}
63+
64+
.preview {
65+
min-height: 220px;
66+
border: 1px dashed #ccc;
67+
border-radius: 10px;
68+
display: grid;
69+
place-items: center;
70+
margin-bottom: 12px;
71+
padding: 12px;
72+
background: #fafafa;
73+
}
74+
75+
#qrImage {
76+
max-width: 100%;
77+
display: none;
78+
}
79+
80+
.download {
81+
background: #222;
82+
color: #fff;
83+
margin-bottom: 10px;
84+
pointer-events: none;
85+
opacity: 0.5;
86+
}
87+
88+
.download.active {
89+
pointer-events: auto;
90+
opacity: 1;
91+
}
92+
93+
#message {
94+
min-height: 20px;
95+
margin: 0;
96+
font-size: 14px;
97+
text-align: center;
98+
}

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,7 @@
2222

2323
## [ Day #14 - Password Generator ](https://moiz-codebyte.github.io/100-days-of-javascript/Day%20%2314%20-%20Password%20Generator/)
2424

25+
## [ Day #15 - QR Code Generator ](https://moiz-codebyte.github.io/100-days-of-javascript/Day%20%2315%20-%20QR%20Code%20Generator/)
26+
2527
## Live Demo
2628
You can see the Projects live listing at [Link](https://moiz-codebyte.github.io/100-days-of-javascript/)

‎index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,9 @@
8888
<div class="box">
8989
<a href="https://moiz-codebyte.github.io/100-days-of-javascript/Day%20%2314%20-%20Password%20Generator/">Password Generator</a>
9090
</div>
91+
<div class="box">
92+
<a href="https://moiz-codebyte.github.io/100-days-of-javascript/Day%20%2315%20-%20QR%20Code%20Generator/">QR Code Generator</a>
93+
</div>
9194
</div>
9295
</body>
9396
</html>

0 commit comments

Comments
 (0)