-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
59 lines (42 loc) · 1.24 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
const qrCodeWrapper = document.getElementById('qr-code-wrapper');
const form = document.querySelector('form');
const create = document.getElementById('submit');
const getFormEntries = () => {
const formData = new FormData(form)
return Object.fromEntries(formData)
}
//* basic
// var qrCode = new QRCode({
// content: "korak",
// container:"svg",
// color: "red",
// join: true,
// })
const createDownloadBtn = (file) => {
const url = URL.createObjectURL(file);
const btn = document.createElement('a');
btn.innerText = 'Download';
btn.setAttribute('href', url);
btn.setAttribute('download', 'qr-code.svg');
qrCodeWrapper.appendChild(btn);
}
const createFile = () => {
const svg = qrCodeWrapper.querySelector('svg');
const svgData = new XMLSerializer().serializeToString(svg);
return new File([svgData], 'qr-code.svg', {
type: 'image/svg+xml',
lastModified: Date.now()
});
}
create.addEventListener('click', (e) => {
e.preventDefault();
const entries = getFormEntries();
var qrCode = new QRCode({
content: `${entries.name} ${entries.age} ${entries.city}`,
container:"svg",
color: entries.color,
join: true,
})
qrCodeWrapper.innerHTML = qrCode.svg();
createDownloadBtn(createFile());
})