Added characters test in editor

Invalid exp changes button to disabled
Invalid exp changes icon to warning
Added style for disabled popup button and hover

Author: TerribleCoding

README.md

@@ -66,7 +66,7 @@ Note: _The order of this list might not match the order these features will be a
 
 _Release date: ???????????????????????_
 
-_Work Time: 4h_
+_Work Time: 5h_
 
 - 
 

pages/common.js

@@ -224,4 +224,33 @@ editor.addEventListener('keyup', function (event) {
         // press 'Enter' to act as pressing the button
         if (event.key == 'Enter') button.click();
     }
-});
+});
+
+// check for errors while typing
+textfield.addEventListener('input', checkErrors);
+
+function checkErrors(event) {
+    var inp = event.target.value.toString();
+
+    // check allowed characters => 0123456789.+-*/()
+    var test = inp.match(/[0-9|\+|\-|\*|\/|(|)|\.]+/);
+    if (!test) test = [""];
+
+    // if length of input = characters matched expression is valid
+    if (inp.length === test[0].length) {
+        button.disabled = false;
+        showIcon(0);
+    } else {
+        button.disabled = true;
+        showIcon(1);
+    }
+
+    function showIcon(index) {
+        icons.forEach(e => e.classList.add('invisible'));
+        icons[index].classList.remove('invisible');
+    }
+
+    // check if parentheses match
+    
+}
+

pages/cylinder.html

@@ -129,7 +129,7 @@ <h4>Expression editor</h4>
                 <p class="big">
                     <span id="var">D</span>
                     <span>=</span>
-                    <input type="text" name="expression" id="expression" placeholder="e.g.: 6+(25/2)">
+                    <input type="text" name="expression" id="expression" placeholder="0">
                     <span>=</span>
                     <span id="result">
                         <num>0</num>

popup.css

@@ -80,6 +80,15 @@ close:hover {
     border-color: var(--color-1);
 }
 
+.popup button:disabled, 
+.popup button:disabled:hover {
+    border-color: var(--color-2);
+    color: var(--color-2);
+    background-color: transparent;
+    opacity: 50%;
+    cursor: default;
+}
+
 .popup button i {
     margin-right: 1ch;
 }