Skip to content

Commit d391a0c

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1992 from Kushalshakya/main
QR Code Generator With Download Feature
2 parents 48dfaf7 + 97d9bfc commit d391a0c

19 files changed

Lines changed: 1064 additions & 0 deletions

File tree

‎Projects/QRCode/README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# QR Generator
2+
3+
This is a simple web application to generate QR codes based on user input text.
4+
5+
## Table of Contents
6+
7+
- [Features](#features)
8+
- [Technologies Used](#technologies-used)
9+
- [How to Use](#how-to-use)
10+
- [Contributing](#contributing)
11+
12+
## Features
13+
14+
- Generate QR codes from user-provided text.
15+
- Ability to download generated QR codes.
16+
- Links to social media platforms for sharing.
17+
18+
## Technologies Used
19+
20+
- HTML5
21+
- CSS3
22+
- JavaScript
23+
- [Bootstrap](https://getbootstrap.com/) (v5.3.2)
24+
- [Font Awesome](https://fontawesome.com/) (v5.8.1)
25+
- [jQuery](https://jquery.com/) (v3.7.1)
26+
- [QRCode.js](https://github.com/davidshimjs/qrcodejs) for generating QR codes
27+
28+
## How to Use
29+
30+
1. Clone this repository.
31+
2. Open `index.html` in your web browser.
32+
3. Enter the text you want to convert into a QR code in the provided input field.
33+
4. Click on the "Generate" button to generate the QR code.
34+
5. Once the QR code is generated, you can download it by clicking the "Download" button.
35+
6. You can also click on the social media icons to share the generated QR code.
36+
37+
## Contributing
38+
39+
Contributions are welcome! If you have any suggestions or find any issues, feel free to open an issue or create a pull request.
40+
41+
Created by [Kushal Shakya](https://github.com/Kushalshakya)

‎Projects/QRCode/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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 Generator</title>
7+
<link rel="stylesheet" href="./webroot/css/style.css">
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
9+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
10+
</head>
11+
<body class="w-100 vh-100 d-flex justify-content-center align-items-center">
12+
<div class="qr rounded p-3 w-lg-100">
13+
<h1 class="text-center text-white fs-2">Generate a QR</h1>
14+
<div class="qr-container d-flex flex-column">
15+
<form class="qr-text d-flex gap-2">
16+
<input type="text" class="rounded" placeholder="Enter your text" spellcheck="false" autofocus>
17+
<button class="btn border-none rounded text-white">Generate</button>
18+
</form>
19+
<div class="qr-code-container d-none border border-2 my-2 mx-1 py-2 row">
20+
<div id="qr-code" class="qr-code py-1 col-12 col-md-8"></div>
21+
<div class="qr-code-division col-12 col-md-4 d-flex flex-column">
22+
<div class="qr-code-recent">
23+
<!-- !Handle Recently created qrcodes -->
24+
<!-- <img src=""> -->
25+
</div>
26+
<div class="qr-download d-flex flex-column justify-content-end h-100 pb-2">
27+
<div class="social-media d-flex gap-3 py-3 justify-content-center">
28+
<img src="./webroot/img/github.png">
29+
</div>
30+
<button class="btn w-100"><a href="" download="qrcode" class="download-btn text-white"><i class="fa fa-download px-2"></i>Download</a></button>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
37+
<script src="./vendors/qrcodejs/qrcode.js"></script>
38+
<script src="./webroot/js/script.js" defer type="text/javascript"></script>
39+
</body>
40+
</html>

‎Projects/QRCode/vendors/qrcodejs/LICENSE‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
The MIT License (MIT)
2+
---------------------
3+
Copyright (c) 2012 davidshimjs
4+
5+
Permission is hereby granted, free of charge,
6+
to any person obtaining a copy of this software and associated documentation files (the "Software"),
7+
to deal in the Software without restriction,
8+
including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
9+
and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
10+
subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
13+
14+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎Projects/QRCode/vendors/qrcodejs/README.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# QRCode.js
2+
QRCode.js is javascript library for making QRCode. QRCode.js supports Cross-browser with HTML5 Canvas and table tag in DOM.
3+
QRCode.js has no dependencies.
4+
5+
## Basic Usages
6+
```
7+
<div id="qrcode"></div>
8+
<script type="text/javascript">
9+
new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
10+
</script>
11+
```
12+
13+
or with some options
14+
15+
```
16+
<div id="qrcode"></div>
17+
<script type="text/javascript">
18+
var qrcode = new QRCode(document.getElementById("qrcode"), {
19+
text: "http://jindo.dev.naver.com/collie",
20+
width: 128,
21+
height: 128,
22+
colorDark : "#000000",
23+
colorLight : "#ffffff",
24+
correctLevel : QRCode.CorrectLevel.H
25+
});
26+
</script>
27+
```
28+
29+
and you can use some methods
30+
31+
```
32+
qrcode.clear(); // clear the code.
33+
qrcode.makeCode("http://naver.com"); // make another code.
34+
```
35+
36+
## Browser Compatibility
37+
IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.
38+
39+
## License
40+
MIT License
41+
42+
## Contact
43+
twitter @davidshimjs
44+
45+
[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/davidshimjs/qrcodejs/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
46+

‎Projects/QRCode/vendors/qrcodejs/bower.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "qrcode.js",
3+
"version": "0.0.1",
4+
"homepage": "https://github.com/davidshimjs/qrcodejs",
5+
"authors": [
6+
"Sangmin Shim", "Sangmin Shim <ssm0123@gmail.com> (http://jaguarjs.com)"
7+
],
8+
"description": "Cross-browser QRCode generator for javascript",
9+
"main": "qrcode.js",
10+
"ignore": [
11+
"bower_components",
12+
"node_modules",
13+
"index.html",
14+
"index.svg",
15+
"jquery.min.js",
16+
"qrcode.min.js"
17+
]
18+
}

‎Projects/QRCode/vendors/qrcodejs/index-svg.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
3+
<head>
4+
<title>Cross-Browser QRCode generator for Javascript</title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
7+
<script type="text/javascript" src="jquery.min.js"></script>
8+
<script type="text/javascript" src="qrcode.js"></script>
9+
</head>
10+
<body>
11+
<input id="text" type="text" value="http://jindo.dev.naver.com/collie" style="width:80%" />
12+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
13+
<g id="qrcode"/>
14+
</svg>
15+
<script type="text/javascript">
16+
var qrcode = new QRCode(document.getElementById("qrcode"), {
17+
width : 100,
18+
height : 100,
19+
useSVG: true
20+
});
21+
22+
function makeCode () {
23+
var elText = document.getElementById("text");
24+
25+
if (!elText.value) {
26+
alert("Input a text");
27+
elText.focus();
28+
return;
29+
}
30+
31+
qrcode.makeCode(elText.value);
32+
}
33+
34+
makeCode();
35+
36+
$("#text").
37+
on("blur", function () {
38+
makeCode();
39+
}).
40+
on("keydown", function (e) {
41+
if (e.keyCode == 13) {
42+
makeCode();
43+
}
44+
});
45+
</script>
46+
</body>
47+
</html>

‎Projects/QRCode/vendors/qrcodejs/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
3+
<head>
4+
<title>Cross-Browser QRCode generator for Javascript</title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
7+
<script type="text/javascript" src="jquery.min.js"></script>
8+
<script type="text/javascript" src="qrcode.js"></script>
9+
</head>
10+
<body>
11+
<input id="text" type="text" value="http://jindo.dev.naver.com/collie" style="width:80%" /><br />
12+
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
13+
14+
<script type="text/javascript">
15+
var qrcode = new QRCode(document.getElementById("qrcode"), {
16+
width : 100,
17+
height : 100
18+
});
19+
20+
function makeCode () {
21+
var elText = document.getElementById("text");
22+
23+
if (!elText.value) {
24+
alert("Input a text");
25+
elText.focus();
26+
return;
27+
}
28+
29+
qrcode.makeCode(elText.value);
30+
}
31+
32+
makeCode();
33+
34+
$("#text").
35+
on("blur", function () {
36+
makeCode();
37+
}).
38+
on("keydown", function (e) {
39+
if (e.keyCode == 13) {
40+
makeCode();
41+
}
42+
});
43+
</script>
44+
</body>

‎Projects/QRCode/vendors/qrcodejs/index.svg‎

Lines changed: 37 additions & 0 deletions
Loading

‎Projects/QRCode/vendors/qrcodejs/jquery.min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)