From 5f3b7b024c2b28cbe681a4454496fb1ea00f6c0e Mon Sep 17 00:00:00 2001 From: David Dickinson <36966460+rnddave@users.noreply.github.com> Date: Tue, 14 May 2024 10:14:15 +0100 Subject: [PATCH] this is the version 2 code, but I do not have access to the node env --- index.html | 37 +++++++++++++++++++++ script.js | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 34 +++++++++++++++++++ 3 files changed, 166 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..0de5441 --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + + + + QR Code Generator + + + +
+

QR Code Generator

+
+
+ + +
+
+ + + +
+ +
+
+ QR Code Preview +
+ + + +
+
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..c615b1a --- /dev/null +++ b/script.js @@ -0,0 +1,95 @@ +// script.js +const form = document.getElementById('qrForm'); +const logoInput = document.getElementById('logo'); +const logoPreview = document.getElementById('logoPreview'); +const qrCodeImage = document.getElementById('qrCodeImage'); +const downloadPNG = document.getElementById('downloadPNG'); +const downloadPDF = document.getElementById('downloadPDF'); +const downloadSVG = document.getElementById('downloadSVG'); + +logoInput.addEventListener('change', () => { + const file = logoInput.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = () => { + logoPreview.src = reader.result; + logoPreview.style.display = 'inline-block'; + }; + reader.readAsDataURL(file); + } +}); + +form.addEventListener('submit', async (event) => { + event.preventDefault(); + const url = document.getElementById('url').value; + const logo = logoInput.files[0]; + + const formData = new FormData(); + formData.append('url', url); + formData.append('logo', logo); + + try { + const response = await fetch('/generate-qr-code', { + method: 'POST', + body: formData, + }); + + if (response.ok) { + const blob = await response.blob(); + const imageUrl = URL.createObjectURL(blob); + qrCodeImage.src = imageUrl; + } else { + console.error('Error generating QR code:', response.statusText); + } + } catch (error) { + console.error('Error:', error); + } +}); + +downloadPNG.addEventListener('click', async () => { + try { + const response = await fetch('/download-qr-code?format=png'); + const blob = await response.blob(); + const url = window.URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'qr-code.png'; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + } catch (error) { + console.error('Error:', error); + } +}); + +downloadPDF.addEventListener('click', async () => { + try { + const response = await fetch('/download-qr-code?format=pdf'); + const blob = await response.blob(); + const url = window.URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'qr-code.pdf'; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + } catch (error) { + console.error('Error:', error); + } +}); + +downloadSVG.addEventListener('click', async () => { + try { + const response = await fetch('/download-qr-code?format=svg'); + const blob = await response.blob(); + const url = window.URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'qr-code.svg'; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + } catch (error) { + console.error('Error:', error); + } +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..85e8cf0 --- /dev/null +++ b/styles.css @@ -0,0 +1,34 @@ +/* styles.css */ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 20px; + } + + .container { + max-width: 600px; + margin: 0 auto; + } + + .form-group { + margin-bottom: 10px; + } + + #logoPreview { + max-width: 100px; + max-height: 100px; + } + + .qr-preview { + text-align: center; + margin-top: 20px; + } + + #qrCodeImage { + max-width: 300px; + max-height: 300px; + } + + .download-options { + margin-top: 10px; + } \ No newline at end of file