-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
66 lines (52 loc) · 1.57 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
const form = document.getElementById('generate-form');
const qr = document.getElementById('qrcode');
const onGenerateSubmit = (e) => {
e.preventDefault();
clearUI();
const url = document.getElementById('url').value;
const size = document.getElementById('size').value;
console.log(url, size);
if(url === '') {
alert('Please enter a URL');
} else {
showSpinner();
setTimeout(() => {
hideSpinner();
generateQRCode(url, size);
setTimeout(() => {
const saveURL = qr.querySelector('img').src;
createSaveBtn(saveURL);
}, 50);
}, 1000);
}
};
const generateQRCode = (url, size) => {
const qrcode = new QRCode('qrcode', {
text: url,
width: size,
height: size,
});
}
const showSpinner = () => {
document.getElementById('spinner').style.display = 'block';
}
const hideSpinner = () => {
document.getElementById('spinner').style.display = 'none';
}
const clearUI = () => {
qr.innerHTML = '';
const saveBtn = document.getElementById('save-link');
if(saveBtn) {
saveBtn.remove();
}
};
const createSaveBtn = (saveURL) => {
const link = document.createElement('a');
link.id = 'save-link';
link.classList = 'bg-red-500 hover:bg-red-700 text-white font-bold py-2 rounded w-1/3 m-auto my-5';
link.href = saveURL;
link.download = 'qrcode';
link.innerHTML = 'Save Image';
document.getElementById('generated').appendChild(link);
};
form.addEventListener('submit', onGenerateSubmit);