Hide when box is empty
1 files changed, 12 insertions(+), 1 deletions(-)

M index.html
M index.html +12 -1
@@ 45,6 45,14 @@ 
             flex: 1;
         }
 
+        .outputbox {
+            will-change: opacity;
+        }
+
+        .outputbox.js-hidden {
+            opacity: 0;
+        }
+
         .title {
             font-size: 16px;
         }

          
@@ 61,7 69,7 @@ 
 
             <textarea class="inputbox js-qr-input" rows="4" autofocus></textarea>
 
-            <div class="js-qr-output"></div>
+            <div class="outputbox js-qr-output"></div>
         </div>
 
         <div>

          
@@ 83,6 91,9 @@ 
 
             if (text !== "") {
                 qr.makeCode(text);
+                outputDom.classList.remove('js-hidden');
+            } else {
+                outputDom.classList.add('js-hidden');
             }
         });
     </script>