add error handling

index.html

@@ -9,6 +9,7 @@
       :root {
         color-scheme: light dark;
         --bg-color: #eee;
+        --error-color: red;
       }
       @media (prefers-color-scheme: dark) {
         :root {
@@ -17,10 +18,14 @@
       }
       html, body {
         font-family: monospace;
+        background-color: var(--bg-color);
       }
       #text {
         width: 100%;
       }
+      #error {
+        color: var(--error-color)
+      }
       button {
         display: block;
         margin: 0.5em 0 0.5em;
@@ -35,5 +40,6 @@ <h1>QR Code Generator</h1>
     <textarea id="text" placeholder="enter or paste url (etc...) here"></textarea>
     <button id="download" type="button" disabled>download qr code</button>
     <canvas></canvas>
+    <p id="error"></p>
   </body>
 </html>

index.js

@@ -17,6 +17,7 @@ const saveBlob = (function() {
 const textElem = document.querySelector('#text');
 const canvasElem = document.querySelector('canvas');
 const downloadElem = document.querySelector('#download');
+const errorElem = document.querySelector('#error');
 const ctx = canvasElem.getContext('2d');
 
 textElem.addEventListener('input', () => {
@@ -30,11 +31,17 @@ downloadElem.addEventListener('click', () => {
 
 function updateQRCode(s) {
   downloadElem.disabled = s ? '' : true;
+  canvasElem.height = 1;
+  errorElem.textContent = '';
   if (!s) {
-    canvasElem.width = 1;
     return;
   }
-  const qr = QrCode.encodeText(s, Ecc.MEDIUM);
+  let qr;
+  try {
+    qr = QrCode.encodeText(s, Ecc.MEDIUM);
+  } catch (e) {
+    errorElem.textContent = e.toString();
+  }
   const scale = 4;
   const padding = 3;
   const size = qr.size + padding * 2;
@@ -47,14 +54,6 @@ function updateQRCode(s) {
       ctx.fillRect(x, y, 1, 1);
     }
   }
-  //const img = new Image();
-  //img.src = ctx.canvas.toDataURL();
-  //qrCodesElem.appendChild(el('div', {
-  //  className: 'qrcode',
-  //}, [
-  //  el('div', {textContent: s}),
-  //  img,
-  //]));
 }
 
 console.log('here');