knowledgebase, github page, minor tweaks

Boolean-Algebra/index.html

@@ -20,10 +20,13 @@
 
         <header>
             <div class="content">
-                <h3><a href="../index.html">CDM</a></h3>
+                <h3><a href="..">CDM Utils</a></h3>
                 <div class="theme">
-                    <h3><a href="../Set-Algebra/index.html">Set Algebra</a></h3>
+                    <h3><a href="../Set-Algebra">Set Algebra</a></h3>
                     <h3><a href="" class="current">Boolean Algebra</a></h3>
+                    <h3><a href=""></a></h3>
+                    <h3><a href="../Knowledgebase">Knowledgebase</a></h3>
+                    <h3><a href="https://github.com/cuqmbr/cdm-utils/" target="_blank">GitHub</a></h3>
                 </div>
             </div>
 
@@ -95,9 +98,9 @@
         </div>
 
         <div class="wrapper hide close" id="stepsNode">
-            <div class="close-button" onclick="ToggleSteps(false)"><img src="../img/cross-close-icon.png" style="width: 12px;"></div>
+            <img src="../img/cross-close-icon.png" class="close-button" onclick="ToggleSteps(false)">
             <div class="step-by-step" id="stepsWrapper">
-                <h1>Step by step</h1>
+                <h1>Step by step <a href="" title="Learn more about Boolean Calculations"><img src="../img/question-mark.png" class="question-mark-button"></a> </h1>
                 <div class="input-wrap" id="input-wrap">
                     <h1 class="text">1.</h1>
                     <div class="input"><input type="result" id="step1" readonly/></div>
@@ -106,9 +109,9 @@
         </div>
 
         <div class="wrapper hide close" id="truthTableNode">
-            <div class="close-button" onclick="ToggleTruthTable(false)"><img src="../img/cross-close-icon.png" style="width: 12px;"></div>
+            <img src="../img/cross-close-icon.png" class="close-button" onclick="ToggleTruthTable(false)">
             <div class="step-by-step" id="truthTableWrapper">
-                <h1>Truth Table</h1>
+                <h1>Truth Table <a href="" title="Learn more about Truth Tabels"><img src="../img/question-mark.png" class="question-mark-button"></a> </h1>
                 <div class="input-wrap" id="input-wrap">
                     <div class="input"><input type="table-start" id="step1" readonly/></div>
                 </div>
@@ -122,9 +125,9 @@
         </div>
 
         <div class="wrapper hide close" id="pdnfNode">
-            <div class="close-button" onclick="TogglePDNF(false)"><img src="../img/cross-close-icon.png" style="width: 12px;"></div>
+            <img src="../img/cross-close-icon.png" class="close-button" onclick="TogglePDNF(false)">
             <div class="step-by-step" id="pdnfWrapper">
-                <h1>Perfect Disjunctive Normal Form</h1>
+                <h1>Perfect Disjunctive Normal Form <a href="" title="Learn more about PDNF"><img src="../img/question-mark.png" class="question-mark-button"></a> </h1>
                 <div class="input-wrap" id="input-wrap">
                     <div class="input"><input type="result" id="step1" readonly/></div>
                 </div>
@@ -132,9 +135,9 @@
         </div>
 
         <div class="wrapper hide close" id="pcnfNode">
-            <div class="close-button" onclick="TogglePCNF(false)"><img src="../img/cross-close-icon.png" style="width: 12px;"></div>
+            <img src="../img/cross-close-icon.png" class="close-button" onclick="TogglePCNF(false)">
             <div class="step-by-step" id="pcnfWrapper">
-                <h1>Perfect Conjunctive Normal Form</h1>
+                <h1>Perfect Conjunctive Normal Form <a href="" title="Learn more about PCNF"><img src="../img/question-mark.png" class="question-mark-button"></a> </h1>
                 <div class="input-wrap" id="input-wrap">
                     <div class="input"><input type="result" id="step1" readonly/></div>
                 </div>

Boolean-Algebra/script.js

@@ -8,7 +8,6 @@ function AddValue() {
     if (currNumOfValues < 26) {
 
         let charNum = 65 + currNumOfValues;
-        symbols2.push(alphabet[currNumOfValues]);
         currNumOfValues++;
 
         let delBtn = document.querySelectorAll('#delBtn');
@@ -67,7 +66,15 @@ function Evaluate() {
     let formulaValuesRPNArray = ConvertCharsToValues(formulaRPNArray);
 
     let result = SolveRPNFormula(formulaValuesRPNArray);
-    if (result == undefined) return;
+    
+    if (result == undefined || formulaValuesRPNArray.some(x => alphabet.indexOf(x) != -1) || formulaValuesRPNArray.some(x => x == undefined)) { 
+        formulaField.style.backgroundColor = 'rgba(255, 255, 255, 0)';
+        formulaField.style.backgroundColor = 'rgba(235, 52, 116, 0.7)';
+        formulaField.style.transition = '0.2s';
+        setTimeout(() => formulaField.style.backgroundColor = 'rgba(255, 255, 255, 0)', 600);
+        return;
+    }
+    
     let readableResult = ConvertToReadableResult(result);
 
     let resultField = document.getElementById('result');
@@ -274,7 +281,15 @@ function StepByStep() {
     let formulaValuesRPNArray = ConvertCharsToValues(formulaRPNArray);
 
     let result = SolveRPNFormula(formulaValuesRPNArray);
-    if (result == undefined) return;
+    
+    if (result == undefined || formulaValuesRPNArray.some(x => alphabet.indexOf(x) != -1) || formulaValuesRPNArray.some(x => x == undefined)) { 
+        formulaField.style.backgroundColor = 'rgba(255, 255, 255, 0)';
+        formulaField.style.backgroundColor = 'rgba(235, 52, 116, 0.7)';
+        formulaField.style.transition = '0.2s';
+        setTimeout(() => formulaField.style.backgroundColor = 'rgba(255, 255, 255, 0)', 600);
+        return;
+    }
+    
     let readableResult = ConvertToReadableResult(result);
 
     let resultField = document.getElementById('result');
@@ -810,7 +825,7 @@ function Error(errMsg) {
 //#region Check Input
 
 const symbols = ['0', '1'];
-const specialSymbols = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'];
+const specialSymbols = ['!', '*', '+', '=', '>', '(', ')', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Shift'];
 
 function checkInputValue(key, value, id) {
     if (value.length < 1 && symbols.indexOf(key) !== -1) {
@@ -828,7 +843,7 @@ function checkInputValue(key, value, id) {
 
 
 function checkInputProblem(key, id) {
-    if (symbols2.indexOf(key) != -1) {
+    if (alphabet.indexOf(key) != -1 || specialSymbols.indexOf(key) != -1) {
         return true;
     } else {
         function backBg() { document.getElementById(id).style.backgroundColor = 'rgba(255, 255, 255, 0)' }
@@ -844,9 +859,4 @@ const alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
     'W', 'X', 'Y', 'Z'
 ];
 
-let symbols2 = ['A', 'B', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Shift',
-    '-', '+', '/', '!', '(', ')'
-];
-
-
 //#endregion

Knowledgebase/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>Coming soon</h1>
+</body>
+</html>

Set-Algebra/index.html

@@ -20,10 +20,13 @@
 
         <header>
             <div class="content">
-                <h3><a href="../index.html">CDM</a></h3>
+                <h3><a href="..">CDM Utils</a></h3>
                 <div class="theme">
                     <h3><a href="" class="current">Set Algebra</a></h3>
-                    <h3><a href="../Boolean-Algebra/index.html">Boolean Algebra</a></h3>
+                    <h3><a href="../Boolean-Algebra">Boolean Algebra</a></h3>
+                    <h3><a href=""></a></h3>
+                    <h3><a href="../Knowledgebase">Knowledgebase</a></h3>
+                    <h3><a href="https://github.com/cuqmbr/cdm-utils/" target="_blank">GitHub</a></h3>
                 </div>
             </div>
         </header>

index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/x-icon" href="img/favicon.png">
-    <title>CDM Calculator</title>
+    <title>CDM Utils</title>
 
     <link rel="stylesheet" href="style.css">
 
@@ -20,10 +20,13 @@
 
         <header>
             <div class="content">
-                <h3><a href="" class="current">CDM</a></h3>
+                <h3><a href="" class="current">CDM Utils</a></h3>
                 <div class="theme">
                     <h3><a href="Set-Algebra/index.html">Set Algebra</a></h3>
                     <h3><a href="Boolean-Algebra/index.html">Boolean Algebra</a></h3>
+                    <h3><a href=""></a></h3>
+                    <h3><a href="Knowledgebase">Knowledgebase</a></h3>
+                    <h3><a href="https://github.com/cuqmbr/cdm-utils/" target="_blank">GitHub</a></h3>
                 </div>
             </div>
 

style.css

@@ -390,14 +390,26 @@ input[type=table-end] {
     transform: translate(0, -3px);
     margin: 25px 5px 0px 0px;
     cursor: pointer;
-    width: 12px;
+    width: 20px;
-    height: 12px;
+    height: 20px;
-    opacity: 75%;
+    opacity: 85%;
     transition: 0.5s;
 }
 
 .close-button:hover {
-    opacity: 95%;
+    opacity: 100%;
+    transition: 0.5s;
+}
+
+.question-mark-button {
+    width: 20px;
+    margin: -1px 10px 0px 10px;
+    opacity: 85%;
+    transition: 0.5s;
+}
+
+.question-mark-button:hover {
+    opacity: 100%;
     transition: 0.5s;
 }