Skip to content

Commit 18143dd

Browse files
ananyag309ananyag309
authored
Added Qr code generator (#847)
* Added Qr code generator * Update README.md * Update index.html * Update README.MD
1 parent 3d184c4 commit 18143dd

File tree

6 files changed

+177
-0
lines changed

6 files changed

+177
-0
lines changed

‎Vanilla-JS-Projects/Basic/Qr-Code-Generator/README.MD‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<h1 align='center'><b>💥 QR Code Generator 💥</b></h1>
2+
3+
<!-- -------------------------------------------------------------------------------------------------------------- -->
4+
5+
<h3 align='center'>Tech Stack Used 🎮</h3>
6+
<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
7+
8+
<div align='center'>
9+
10+
![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
11+
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
12+
<!-- ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white) -->
13+
![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
14+
<!-- ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) -->
15+
<!-- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) -->
16+
<!-- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) -->
17+
<!-- ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -->
18+
<!-- ![Web3.js](https://img.shields.io/badge/web3.js-F16822?style=for-the-badge&logo=web3.js&logoColor=white) -->
19+
<!-- ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) -->
20+
<!-- ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white) -->
21+
<!-- ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) -->
22+
<!-- ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) -->
23+
<!-- ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D) -->
24+
<!-- ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) -->
25+
</div>
26+
27+
28+
![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
29+
30+
<!-- -------------------------------------------------------------------------------------------------------------- -->
31+
32+
## :zap: Description 📃
33+
34+
<div>
35+
<!-- <p>Add Description of the project</p> -->
36+
<p>An QR code generator is a tool that converts text, URLs, or other data into a scannable QR code, enabling easy sharing of information.</p>
37+
</div>
38+
39+
40+
<!-- -------------------------------------------------------------------------------------------------------------- -->
41+
42+
## :zap: How to run it? 🕹️
43+
44+
<!-- Add steps how to run this project -->
45+
46+
- Clone this repository.
47+
- Navigate to this project directory
48+
- Run the `index.html` file.
49+
50+
<!-- -------------------------------------------------------------------------------------------------------------- -->
51+
52+
## :zap: Screenshots 📸
53+
<!-- add the screenshot of the project (Mandatory) -->
54+
![img](./screenshot.webp)
55+
56+
57+
58+
59+
![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
60+
61+
<!-- -------------------------------------------------------------------------------------------------------------- -->
62+
63+
<h4 align='center'>Developed By <b><i>Ananya Gupta</i></b> 👦</h4>
64+
<p align='center'>
65+
<a href='https://github.com/ananyag309'>
66+
<img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
67+
</a>
68+
</p>
69+
70+
<h4 align='center'>Happy Coding 🧑‍💻</h4>
71+
72+
<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>

‎Vanilla-JS-Projects/Basic/Qr-Code-Generator/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!--Index.html-->
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
5+
<head>
6+
<link rel="stylesheet" href="./style.css" />
7+
<script src=
8+
"https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js">
9+
</script>
10+
</head>
11+
12+
<body>
13+
<div class="header">
14+
<div class="box">
15+
<h1>
16+
QR Code Generator
17+
</h1>
18+
<hr />
19+
<div class="sqrcode"></div>
20+
<div class="qrcode"></div>
21+
<input type="text"
22+
placeholder="Paste a URL or enter text, then enter"
23+
onchange="generateQr()" />
24+
</div>
25+
</div>
26+
<script src="./script.js"></script>
27+
</body>
28+
29+
</html>

‎Vanilla-JS-Projects/Basic/Qr-Code-Generator/screenshot.webp‎

13.3 KB
Loading

‎Vanilla-JS-Projects/Basic/Qr-Code-Generator/script.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
let qrcode = new QRCode(
2+
document.querySelector(".qrcode")
3+
);
4+
qrcode.makeCode("Why did you scan me?");
5+
function generateQr() {
6+
if (
7+
document.querySelector("input")
8+
.value === "" ||
9+
document.querySelector("input")
10+
.value === " ") {
11+
alert(
12+
"Input Field Can not be blank!"
13+
);}
14+
else {
15+
qrcode.makeCode(
16+
document.querySelector(
17+
"input"
18+
).value);
19+
}}

‎Vanilla-JS-Projects/Basic/Qr-Code-Generator/style.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
body {
2+
font-family: "Ubuntu", sans-serif;
3+
background-color: #f0f0f0;
4+
margin: 0;
5+
padding: 0;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
height: 100vh;
10+
}
11+
.container {
12+
background-color: #fff;
13+
box-shadow: 0px 0px 10px
14+
rgba(0, 0, 0, 0.1);
15+
border-radius: 5px;
16+
padding: 20px;
17+
text-align: center;
18+
}
19+
.header {
20+
text-align: center;
21+
}
22+
h1 {
23+
font-size: 28px;
24+
margin-bottom: 10px;
25+
color: #333;
26+
}
27+
hr {
28+
border: 1px solid #ddd;
29+
margin: 20px 0;
30+
}
31+
input[type="text"] {
32+
width: 100%;
33+
padding: 10px;
34+
font-size: 16px;
35+
border: 1px solid #ccc;
36+
border-radius: 5px;
37+
outline: none;
38+
}
39+
.qrcode {
40+
margin: 20px 0;
41+
}
42+
button {
43+
background-color: #007bff;
44+
color: #fff;
45+
padding: 10px 20px;
46+
font-size: 16px;
47+
border: none;
48+
border-radius: 5px;
49+
cursor: pointer;
50+
outline: none;
51+
}
52+
53+
/* Hover effect for the button */
54+
button:hover {
55+
background-color: #0056b3;
56+
}

‎Vanilla-JS-Projects/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@
121121
| 94 | [Movie-App](./Intermediate/Movie-App/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |
122122
| 95 | [Meme-Creator](./Intermediate/Meme-Creator/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |
123123
| 96 | [Github-Profile-Viewer](./Intermediate/Github-Profile-Viewer/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |
124+
| 97 | [Qr-Code-Generator](./Basic/Qr-Code-Generator/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
124125
</div>
125126

126127

0 commit comments

Comments
 (0)