Add instructions; error handling + layout

js/index.js

@@ -1,16 +1,47 @@
+/**
+ * @param {string} link
+ * @param {string} idInstr
+ * @returns {object}
+ */
+function validate(link, idInstr) {
+    const pattern = /[A-Z]{3}_[0-9]{2}/;
+
+    return {
+        linkError : link !== '',
+        idInstrError : pattern.test(idInstr)
+    }
+}
+
 document.addEventListener('DOMContentLoaded', () => {
     const download = document.querySelector('#download');
 
     document.querySelector('#gen').addEventListener('click', () => {
+        const errors = document.querySelectorAll(".toast-error");
+
+        for (let error of errors) {
+            error.className = 'text-center toast toast-error d-hide';
+        }
+
         let link = document.querySelector('input[name="link"]').value;
-        let idInstr =document.querySelector('input[name="id-str"]').value; 
+        const idInput = document.querySelector('input[name="id-str"]');
+        const idInstr = idInput.value; 
+
+        if (!validate(link, idInstr).linkError) {
+            errors[0].classList.remove('d-hide');
+            return;
+        }
+
+        if (!validate(link, idInstr).idInstrError) {
+            errors[1].classList.remove('d-hide');
+            return;
+        }
 
         let canvas = document.querySelector('canvas');
         const ctx = canvas.getContext('2d');
         ctx.clearRect(0,0,canvas.width, canvas.height);
 
         const txtColor = "#000";
-        const qrWidth = 220;
+        const qrSize = 220;
         const leftMargin = 12;
 
         ctx.fillStyle = txtColor;
@@ -26,18 +57,18 @@ document.addEventListener('DOMContentLoaded', () => {
         let qr = new QRious({element: qrImg});
 
         qr.set({
-            size: 200,
+            size: qrSize,
             value: link
         })
 
         // Draw images
         ispcLogo.onload = () => {
-            ctx.drawImage(ispcLogo, leftMargin, 10, 200, 75)
+            ctx.drawImage(ispcLogo, leftMargin + 4, 10, 210, 79)
         }
 
         qrImg.src = qr.toDataURL();
         qrImg.onload = () => {
-            ctx.drawImage(qrImg, leftMargin, 90, qrWidth, qrWidth)
+            ctx.drawImage(qrImg, leftMargin, 90, qrSize, qrSize)
         }
         // Draw instrument ID as text
         ctx.font = '48px sans-serif';
@@ -46,7 +77,7 @@ document.addEventListener('DOMContentLoaded', () => {
         ctx.fillText(idInstr, txtLeftDist, 352);
 
         erihsLogo.onload = () => {
-            ctx.drawImage(erihsLogo, 20, 370, 210, 41)
+            ctx.drawImage(erihsLogo, 12, 370, 220, 43)
         }
         download.classList.remove('disabled');
     });