Skip to content

Commit cc6ec78

Browse files
coding-aqyanooscoding-aqyanoos
committed
aqyanoos.com
0 parents  commit cc6ec78

File tree

6 files changed

+369
-0
lines changed

6 files changed

+369
-0
lines changed

Diff for: ‎README.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# How to Make a QR Code Generator Website using HTML CSS JS - JavaScript?
2+
3+
In this course you will learn how to make your own QR Code Generator Website using HTML, CSS and JS (JavaScript).
4+
5+
With your Favorite color, size and add your logo.
6+
7+
You can watch the video course [here](https://youtu.be/31DEiu6eQRM) and the Live Demo is [here](https://aqyanoos.com/how-to-make-qr-code-generator-html-css-js.html). You can use the Live Demo to make QR Code images with any color, any size, with your own logo and finally download it, use it, share it,...
8+
9+
### Our Social Media
10+
11+
> [YouTube](https://www.youtube.com/@CodingAqyanoos)
12+
13+
> [Facebook](https://www.facebook.com/CodingAqyanoos)
14+
15+
> [LinkedIn](https://www.linkedin.com/company/aqyanoos/)
16+
17+
> [X](https://twitter.com/CodingAqyanoos)
18+
19+
> [Website](https://aqyanoos.com)
20+
21+
22+
#### Have fun and enjoy learning
23+
24+
25+

Diff for: ‎easy-qrcode.js

+21
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎index.html

+205
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<script src="easy-qrcode.js"></script>
8+
<title>QR Code Generator Website</title>
9+
<style>
10+
body {
11+
margin: 0;
12+
padding: 0;
13+
font-size: 16px;
14+
background: #fff;
15+
font-family: Verdana, Tahoma, Arial;
16+
}
17+
18+
.container {
19+
position: relative;
20+
width: 70%;
21+
right: 15%;
22+
left: 15%;
23+
top: 15px;
24+
box-shadow: 0 0 5px 8px #ddd;
25+
padding: 10px 15px;
26+
border-radius: 10px;
27+
background: #eee;
28+
margin-bottom: 70px;
29+
}
30+
31+
#qrcode {
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
}
36+
37+
.flex {
38+
display: flex;
39+
}
40+
41+
.mt-10 {
42+
margin-top: 10px;
43+
}
44+
45+
#qrcodeText {
46+
width: 100%;
47+
height: 30px;
48+
min-height: 30px;
49+
resize: vertical;
50+
margin-top: 5px;
51+
}
52+
53+
label {
54+
font-weight: bold;
55+
}
56+
57+
input[type='number'] {
58+
width: 100px;
59+
text-align: center;
60+
}
61+
62+
input[type='checkbox'] {
63+
width: 20px;
64+
height: 20px;
65+
}
66+
67+
.info {
68+
background: #e99d04;
69+
color: #fff;
70+
font-style: italic;
71+
padding: 5px;
72+
}
73+
74+
.btn {
75+
padding: 7px 20px;
76+
background: #059505;
77+
color: #fff;
78+
outline: none;
79+
border: none;
80+
box-shadow: 0 0 2px 3px #068506;
81+
border-radius: 5px;
82+
cursor: pointer;
83+
width: 100%;
84+
font-size: 18px;
85+
}
86+
87+
#download-btn {
88+
background: #0084ff;
89+
box-shadow: 0 0 2px 3px #0274df;
90+
}
91+
92+
#generate-btn {
93+
margin-top: 20px;
94+
margin-bottom: 10px;
95+
}
96+
97+
.italic {
98+
font-style: italic;
99+
}
100+
101+
.hidden {
102+
display: none;
103+
}
104+
105+
footer {
106+
text-align: center;
107+
padding: 20px 10px;
108+
background: #008080;
109+
color: #fff;
110+
}
111+
112+
.my-10 {
113+
margin-top: 10px;
114+
margin-bottom: 10px;
115+
}
116+
117+
footer a {
118+
color: #1fb1f4;
119+
text-decoration: none;
120+
}
121+
122+
</style>
123+
</head>
124+
125+
<body>
126+
<section class="container">
127+
<header>
128+
<h1>QR Code Generator Website</h1>
129+
</header>
130+
<div>
131+
<div id="qrcode">
132+
<img src="test-qr-code.png" alt="QR-Code-Generator">
133+
</div>
134+
<div class="hidden mt-10 download-btn-container">
135+
<div class="mt-10 italic">Your QR Code is ready to be downloaded.</div>
136+
<button id="download-btn" class="btn mt-10">Download</button>
137+
</div>
138+
139+
<section>
140+
<h2>Customize Your QR Code</h2>
141+
<form action="#" id="qrcode-settings">
142+
<div>
143+
<label for="qrcodeText">Enter Your Text</label>
144+
</div>
145+
<textarea id="qrcodeText" name="text">https://aqyanoos.com</textarea>
146+
147+
<div class="mt-10">
148+
<label for="bgColor">Background Color</label>
149+
<input type="color" id="bgColor" name="bgColor" value="#ffffff">
150+
</div>
151+
152+
<div class="mt-10">
153+
<label for="txtColor">Text Color</label>
154+
<input type="color" id="txtColor" name="txtColor" value="#000000">
155+
</div>
156+
157+
<div class="mt-10">
158+
<label for="qrcodeWidth">QR Code Width and Height</label>
159+
<input type="number" id="qrcodeWidth" name="qrcodeWidth" value="256">
160+
</div>
161+
162+
<div class="mt-10">
163+
<label for="customLogo">Your Logo</label>
164+
<input type="file" id="customLogo" name="customLogo">
165+
</div>
166+
167+
<div class="mt-10">
168+
<label for="logoWidth">Logo Width and Height</label>
169+
<input type="number" id="logoWidth" name="logoWidth" value="70">
170+
</div>
171+
172+
<div class="flex mt-10">
173+
<label for="isTransparent">Logo Transparent: </label>
174+
<input type="checkbox" id="isTransparent" name="isTransparent" checked>
175+
</div>
176+
177+
<p class="info">
178+
If Checked, the logo background color will not have any effect.
179+
</p>
180+
<div class="mt-10">
181+
<label for="logoBg">Logo Background </label>
182+
<input type="color" id="logoBg" name="logoBg">
183+
</div>
184+
185+
<div class="mt-10">
186+
<button id="generate-btn" type="submit" class="btn">Generate</button>
187+
</div>
188+
</form>
189+
190+
</section>
191+
</div>
192+
</section>
193+
194+
<footer>
195+
<div class="my-10">
196+
Watch this <a href="https://youtu.be/31DEiu6eQRM" target="_blank">video</a> to learn how to make this QR Code Generator Step-by-Step.
197+
</div>
198+
<div>
199+
&copy; Created by <a href="https://aqyanoos.com">Aqyanoos.com</a> | 2024
200+
</div>
201+
</footer>
202+
<script src="script.js"></script>
203+
</body>
204+
205+
</html>

Diff for: ‎info.txt

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
2+
All the options that you can pass to the QR Code Generator Class:
3+
4+
const options =
5+
{
6+
text: "https://aqyanoos.com/easy.qrcode.min.js",
7+
logo: "logo.png",
8+
logoWidth: undefined,
9+
logoHeight: undefined,
10+
logoBackgroundColor: '#ffffff',
11+
logoBackgroundTransparent: false
12+
width: 256,
13+
height: 256,
14+
typeNumber: 4,
15+
colorDark: "#000000",
16+
colorLight: "#ffffff",
17+
correctLevel: QRErrorCorrectLevel.H,
18+
quietZone: 0,
19+
quietZoneColor: 'transparent',
20+
// === Posotion Pattern(Eye) Color
21+
PO: undefined, // Global Posotion Outer color. if not set, the defaut is `colorDark`
22+
PI: undefined, // Global Posotion Inner color. if not set, the defaut is `colorDark`
23+
PO_TL: undefined, // Posotion Outer - Top Left
24+
PI_TL: undefined, // Posotion Inner - Top Left
25+
PO_TR: undefined, // Posotion Outer - Top Right
26+
PI_TR: undefined, // Posotion Inner - Top Right
27+
PO_BL: undefined, // Posotion Outer - Bottom Left
28+
PI_BL: undefined, // Posotion Inner - Bottom Left
29+
// === Alignment Color
30+
AO: undefined, // Alignment Outer. if not set, the defaut is `colorDark`
31+
AI: undefined, // Alignment Inner. if not set, the defaut is `colorDark`
32+
// === Timing Pattern Color
33+
timing: undefined, // Global Timing color. if not set, the defaut is `colorDark`
34+
timing_H: undefined, // Horizontal timing color
35+
timing_V: undefined, // Vertical timing color
36+
// ==== Backgroud Image
37+
backgroundImage: undefined, // Background Image
38+
backgroundImageAlpha: 1, // Background image transparency, value between 0 and 1. default is 1.
39+
autoColor: false,
40+
autoColorDark: "rgba(0, 0, 0, .6)", // Automatic color: dark CSS color
41+
autoColorLight: "rgba(255, 255, 255, .7)", // Automatic color: light CSS color
42+
// IE9+ Only
43+
dotScale: 1,
44+
// from Version 1 to Version 40. 0 means automatically choose the closest version based on the text length.
45+
version: 0,
46+
// Whether set the QRCode Text as the title attribute value of the image
47+
tooltip: false,
48+
// binary mode or not
49+
binary: false,
50+
// or 'svg'
51+
drawer: 'canvas',
52+
// specifies the CORS setting to use when retrieving the image
53+
crossOrigin: null
54+
// ==== Event Handler
55+
onRenderingStart: undefined,
56+
onRenderingEnd: undefined,
57+
title: "",
58+
titleFont: "bold 16px Arial",
59+
titleColor: "#000000",
60+
titleBackgroundColor: "#ffffff",
61+
titleHeight: 0,
62+
titleTop: 30,
63+
subTitle: "",
64+
subTitleFont: "14px Arial",
65+
subTitleColor: "#4F4F4F",
66+
subTitleTop: 0,
67+
}

Diff for: ‎script.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
2+
const qrCodeSettings = document.getElementById("qrcode-settings"),
3+
qrcodeContainer = document.getElementById("qrcode"),
4+
generateBtn = document.getElementById("generate-btn"),
5+
downloadBtn = document.getElementById("download-btn"),
6+
downloadBtnContainer = document.querySelector(".download-btn-container");
7+
8+
qrCodeSettings.onsubmit = function (e) {
9+
e.preventDefault()
10+
11+
qrcodeContainer.innerHTML = ""
12+
const formData_ = new FormData(qrCodeSettings, generateBtn)
13+
14+
const userInputs = {}
15+
16+
for (const [key, value] of formData_) {
17+
userInputs[key] = value
18+
}
19+
20+
const settings = {
21+
text: userInputs.text,
22+
width: userInputs.qrcodeWidth,
23+
height: userInputs.qrcodeWidth,
24+
typeNumber: 4,
25+
colorDark: userInputs.txtColor,
26+
colorLight: userInputs.bgColor,
27+
quietZone: 10,
28+
quietZoneColor: userInputs.bgColor,
29+
}
30+
31+
if (userInputs.customLogo.name) {
32+
settings.logo = URL.createObjectURL(userInputs.customLogo)
33+
settings.logoBackgroundColor = userInputs.logoBg
34+
settings.logoBackgroundTransparent = userInputs.isTransparent
35+
settings.logoWidth = userInputs.logoWidth
36+
settings.logoHeight = userInputs.logoWidth
37+
}
38+
console.log("user inputs: ", userInputs, settings)
39+
const qrcode_ = new QRCode(qrcodeContainer, settings)
40+
downloadBtnContainer.classList.remove("hidden")
41+
}
42+
43+
downloadBtn.onclick = function(){
44+
const qrcodeImage = document.querySelector("#qrcode canvas")
45+
const data = qrcodeImage.toDataURL("image/png"),
46+
aEl = document.createElement("a")
47+
aEl.href = data
48+
aEl.download = new Date().toLocaleDateString() + ".png"
49+
50+
aEl.click()
51+
}

Diff for: ‎test-qr-code.png

12.7 KB
Loading

0 commit comments

Comments
 (0)