commit

Boolean-Algebra/index.html

@@ -18,9 +18,9 @@
 
         <header>
             <div class="content">
-                <h3><a href="">CDM</a></h3>
+                <h3><a href="../index.html">CDM</a></h3>
                 <div class="theme">
-                    <h3><a href="../Lab-1/index.html">Set Algebra</a></h3>
+                    <h3><a href="../Set-Algebra/index.html">Set Algebra</a></h3>
                     <h3><a href="">Boolean Algebra</a></h3>
                 </div>
             </div>
@@ -34,11 +34,11 @@
                 <div id="values">
                     <div class="input-wrap">
                         <h1 class="text">Value A = </h1>
-                        <div class="input"><input type="value" id="value0" placeholder="e.g. 0 or 1" /></div>
+                        <div class="input"><input type="value" id="value0" onkeydown="return checkInputValue(event.key, this.value)" placeholder="e.g. 0 or 1" /></div>
                     </div>
                     <div class="input-wrap">
                         <h1 class="text">Value B = </h1>
-                        <div class="input"><input type="value" id="value1" placeholder="e.g. 0 or 1" /></div>
+                        <div class="input"><input type="value" id="value1" onkeydown="return checkInputValue(event.key, this.value)" placeholder="e.g. 0 or 1" /></div>
                     </div>
                 </div>
                 <input class="addValue" type="button" value="Add Value" onclick="AddValue()" />
@@ -46,7 +46,7 @@
 
             <div class="wrap-side">
                 <h1>Formulua</h1>
-                <h2><input type="problem" id="formula" placeholder="e.g. !A*(B+C)" /></h2>
+                <h2><input type="problem" id="formula" onkeydown="return checkInputProblem(event.key)" placeholder="e.g. !A*(B+C)" /></h2>
                 <div class="buttons">
                     <input class="button" type="button" id="calculate" value="Evaluate" onclick="Evaluate()" />
                     <input class="button" type="button" id="calculate" value="Step by step" onclick="StepByStep()" />

Boolean-Algebra/script.js

@@ -16,7 +16,7 @@ function AddValue() {
         node = document.getElementById('values');
         node.insertAdjacentHTML('beforeend', `  <div class="input-wrap">
                                                     <h1 class="text">Value &#${charNum} = </h1>
-                                                    <div class="input"><input type="value" id="value${currNumOfValues - 1}" placeholder="e.g. 0 or 1"/></div>
+                                                    <div class="input"><input type="value" onkeydown="return checkInputValue(event.key, this.value)" id="value${currNumOfValues - 1}" placeholder="e.g. 0 or 1"/></div>
                                                 </div>`);
 
     } else {
@@ -97,6 +97,8 @@ function Evaluate() {
         let stepsActionsArray = StepByStepRPNFormula(formulaRPNArray);
         let stepsResultsArray = result[1];
         
+        console.log(stepsActionsArray);
+        console.log(stepsResultsArray);
         
         for (let i = 0; i < stepsActionsArray.length; i++) {
             const action = stepsActionsArray[i];
@@ -567,4 +569,30 @@ function convertToReadableResult(unconverted) {
 
 function Error(errMsg) {
     console.log(` [ERROR] ${errMsg}`);
+}
+
+//----------------------------- Check Input ---------------------------
+
+const symbols = ['0', '1'];
+const specialSymbols = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'];
+
+function checkInputValue(key, value) {
+    if (value.length < 1 && symbols.indexOf(key) !== -1) {
+        return true;
+    } else if (value.length == 1 && specialSymbols.indexOf(key) !== -1) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+
+const symbols2 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
+    'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
+    'W', 'X', 'Y', 'Z', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete',
+    '>', '=', '+', '*', '!', '(', ')'
+];
+
+function checkInputProblem(key) {
+    return (symbols2.indexOf(key) != -1) ? true : false;
 }

Set-Algebra/index.html

@@ -5,8 +5,8 @@
     <meta charset="UTF-8">
     <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="favicon.png">
-    <title>Lab-1</title>
+    <title>Set Algebra Calculator</title>
 
     <link rel="stylesheet" href="../style.css">
 
@@ -18,10 +18,10 @@
 
         <header>
             <div class="content">
-                <h3><a href="">CDM</a></h3>
+                <h3><a href="../index.html">CDM</a></h3>
                 <div class="theme">
                     <h3><a href="">Set Algebra</a></h3>
-                    <h3><a href="">Boolean Algebra</a></h3>
+                    <h3><a href="../Boolean-Algebra/index.html">Boolean Algebra</a></h3>
                 </div>
             </div>
 
@@ -34,11 +34,11 @@
                 <div id="sets">
                     <div class="input-wrap">
                         <h1 class="text">Set A = </h1>
-                        <div class="input"><input type="set" id="set0" placeholder="1,2,3" /></div>
+                        <div class="input"><input type="set" onkeydown="return checkInputSet(event.key, this.value)" id="set0" placeholder="1,2,3" /></div>
                     </div>
                     <div class="input-wrap">
                         <h1 class="text">Set B = </h1>
-                        <div class="input"><input type="set" id="set1" placeholder="Define set" /></div>
+                        <div class="input"><input type="set" onkeydown="return checkInputSet(event.key, this.value)" id="set1" placeholder="Define set" /></div>
                     </div>
                 </div>
                 <input class="addSet" type="button" value="Add Set" onclick="AddSet()" />
@@ -46,10 +46,10 @@
 
             <div class="wrap-side">
                 <h1>Problem</h1>
-                <h2><input type="problem" id="formula" placeholder="!A-C+B/U" /></h2>
+                <h2><input type="problem" id="formula" onkeydown="return checkInputProblem(event.key)" placeholder="!A-C+B/U" /></h2>
                 <div class="buttons">
-                    <input class="button" type="button" id="calculate" value="Evaluate" onclick="Evaluate()" />
+                    <input class="button" type="button" id="calculate" value="Evaluate" onclick="Evaluate(true)" />
-                    <input class="button" type="button" id="calculate" value="Step by step" onclick="Evaluate()" />
+                    <input class="button" type="button" id="calculate" value="Step by step" onclick="stepByStep()" />
                 </div>
                 <div class="wrap-result">
                     <div class="input-wrap">
@@ -79,13 +79,9 @@
             </div>
         </div>
 
-        <div class="wrapper hide">
+        <div class="wrapper hide" id="stepByStep">
-            <div class="step-by-step">
+            <div class="step-by-step" id="steps">
                 <h1>Step by step</h1>
-                <div class="input-wrap">
-                    <h1 class="text">1.</h1>
-                    <div class="input"><input type="result" id="step1" readonly/></div>
-                </div>
             </div>
         </div>
     </div>

Set-Algebra/script.js

@@ -8,15 +8,10 @@ function AddSet() {
         let charNum = 65 + currNum;
         currNum++;
 
-        let delBtn = document.querySelectorAll('#delBtn');
-        if (delBtn[delBtn.length - 1]) {
-            delBtn[delBtn.length - 1].style = "display: none;";
-        }
-
         node = document.getElementById('sets');
         node.insertAdjacentHTML('beforeend', `  <div class="input-wrap">
                                                     <h1 class="text">Set &#${charNum} = </h1>
-                                                    <div class="input"><input type="set" id="set${charNum}" placeholder="Define set"/></div>
+                                                    <div class="input"><input type="set" onkeydown="return checkInputSet(event.key, this.value)" id="set${charNum - 65}" placeholder="Define set"/></div>
                                                 </div>`);
 
     } else {
@@ -24,28 +19,10 @@ function AddSet() {
     }
 }
 
-function DeleteSet(setNum) {
-
-    let setField = document.querySelector(`#setfield${setNum}`);
-    setField.remove();
-    currNum--;
-
-    let delBtn = document.querySelectorAll('#delBtn');
-    if (delBtn[delBtn.length - 1]) {
-        delBtn[delBtn.length - 1].style = "display: inline-block;";
-    }
-}
-
-
 let universalSet = new Set();
 
 function Complement(set) {
-
+    return (checkEmpty(set)) ? universalSet : Difference(universalSet, set);
-    let _complement = new Set();
-
-    _complement = Difference(universalSet, set);
-
-    return _complement;
 }
 
 function Intersection(set1, set2) {
@@ -58,7 +35,7 @@ function Intersection(set1, set2) {
         }
     });
 
-    return _intersection;
+    return sortSet(_intersection);
 }
 
 function Union(set1, set2) {
@@ -69,7 +46,7 @@ function Union(set1, set2) {
         _union.add(element);
     });
 
-    return _union;
+    return sortSet(_union);
 }
 
 function Difference(set1, set2) {
@@ -83,9 +60,20 @@ function Difference(set1, set2) {
         }
     });
 
-    return _difference;
+    return sortSet(_difference);
 }
 
+function sortSet(set) {
+    let entries = [];
+    for (let member of set) {
+        entries.push(+member);
+    }
+    set.clear();
+    for (let entry of entries.sort((a, b) => a - b)) {
+        set.add(entry);
+    }
+    return set;
+};
 
 const OPERATORS = new Set(['~', '!', '∩', '/', '∪', '+', '-']);
 const BRACKETS = new Set(['(', ')']);
@@ -93,7 +81,11 @@ const BRACKETS = new Set(['(', ')']);
 let SETSNAMES = new Set();
 let SETS = new Array();
 
-function Evaluate() {
+function Evaluate(hide = false) {
+    if (hide == true) {
+        let stepByStep = document.getElementById('stepByStep');
+        stepByStep.classList.add('hide');
+    }
 
     FetchSets();
 
@@ -106,11 +98,9 @@ function Evaluate() {
 
     let readableResult = ConvertToReadableResult(result);
 
-
     let resultField = document.getElementById('result');
     resultField.value = readableResult;
 
-
     SETSNAMES.clear();
     SETS = new Array();
     universalSet = new Set();
@@ -187,9 +177,9 @@ function SolveRPNFormula(RPN_Array) {
             if (element == '~' || element == '!') {
 
                 let currSet = stack.pop();
-
                 let result = Complement(currSet);
 
+                printStep('!', currSet, '', result);
                 stack.push(result);
             } else if (element == '∩' || element == '/') {
 
@@ -198,6 +188,7 @@ function SolveRPNFormula(RPN_Array) {
 
                 let result = Intersection(firstSet, secondSet);
 
+                printStep('/', firstSet, secondSet, result);
                 stack.push(result);
             } else if (element == '∪' || element == '+') {
 
@@ -206,6 +197,7 @@ function SolveRPNFormula(RPN_Array) {
 
                 let result = Union(firstSet, secondSet);
 
+                printStep('+', firstSet, secondSet, result);
                 stack.push(result);
             } else if (element == '-') {
 
@@ -214,10 +206,10 @@ function SolveRPNFormula(RPN_Array) {
 
                 let result = Difference(firstSet, secondSet);
 
+                printStep('-', firstSet, secondSet, result);
                 stack.push(result);
             }
         } else {
-
             stack.push(element);
         }
     }
@@ -225,8 +217,6 @@ function SolveRPNFormula(RPN_Array) {
     return stack[0];
 }
 
-
-
 function FetchSets() {
 
     let universalArray = new Array();
@@ -250,22 +240,18 @@ function FetchSets() {
             });
 
             SETSNAMES.add(String.fromCharCode(65 + i));
-            SETS.push(newSet);
+            SETS.push(sortSet(newSet));
         } else {
-            console.log('[WARNING] Some of the sets are not defined');
+            SETS.push(new Set());
         }
     }
 
-    universalSet = new Set(universalArray);
+    universalSet = sortSet(new Set(universalArray));
 }
 
 
-
-
 function GetSetFromIndex(index) {
-
     let unicode = index.charCodeAt(0);
-
     let num = unicode - 65;
 
     return SETS[num];
@@ -289,7 +275,97 @@ function GetActionPriority(action) {
 }
 
 function ConvertToReadableResult(unconverted) {
+    return (checkEmpty(unconverted)) ? "Empty Set" : Array.from(unconverted).sort((a, b) => a - b).join(', ');
+}
 
-    let converted = Array.from(unconverted).sort().join(', ');
+function checkEmpty(set) {
-    return converted;
+    return (set == undefined || set.size == 0) ? true : false;
+}
+
+//----------------------------- Step by Step ---------------------------
+
+function stepByStep() {
+    let stepByStep = document.getElementById('stepByStep');
+    let clear = document.getElementById('steps');
+    clear.remove();
+
+    step = 0;
+    stepByStep.classList.remove('hide');
+    stepByStep.insertAdjacentHTML('beforeend', `  <div class="step-by-step" id="steps">
+                                                     <h1>Step by step</h1>
+                                                   </div>`);
+    Evaluate();
+}
+
+let step = 0;
+
+function printStep(operation, firstSet, secondSet, result) {
+    step++;
+
+    let str = '';
+    switch (operation) {
+        case '!':
+            str = `!${setToString(firstSet)} = ${setToString(result)}`;
+            break;
+
+        case '/':
+            str = `${setToString(firstSet)} / ${setToString(secondSet)} = ${setToString(result)}`;
+            break;
+
+        case '+':
+            str = `${setToString(firstSet)} + ${setToString(secondSet)} = ${setToString(result)}`;
+            break;
+
+        case '-':
+            str = `${setToString(firstSet)} - ${setToString(secondSet)} = ${setToString(result)}`;
+            break;
+
+        default:
+            break;
+    }
+
+    let steps = document.getElementById('steps');
+    steps.insertAdjacentHTML('beforeend', `  <div class="input-wrap">
+                                                <h1 class="text">${step}.  </h1>
+                                                <div class="input"><input type="result" value="${str}" readonly/></div>
+                                            </div>`);
+}
+
+function setToString(set) {
+    let str = '';
+    if (checkEmpty(set)) {
+        return '{ Empty Set }'
+    } else {
+        for (let num of set) {
+            str += ', ' + num;
+        }
+    }
+    return '{ ' + str.slice(2, str.length) + ' }';
+}
+
+
+//----------------------------- Check Input ---------------------------
+
+const symbols = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'];
+
+function checkInputSet(key, value) {
+    if (value[value.length - 1] == ',' && symbols.indexOf(key) !== -1) {
+        return true;
+    } else if (symbols.indexOf(value[value.length - 1]) !== -1 && key == ',') {
+        return true;
+    } else if (symbols.indexOf(key) !== -1) {
+        return true;
+    } else {
+        return false;
+    }
+}
+
+const symbols2 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
+    'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
+    'W', 'X', 'Y', 'Z', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete',
+    '-', '+', '/', '!', '(', ')'
+];
+
+function checkInputProblem(key) {
+    return (symbols2.indexOf(key) != -1) ? true : false;
 }

index.html

@@ -0,0 +1,48 @@
+<!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">
+    <link rel="icon" type="image/x-icon" href="img/favicon.png">
+    <title>CDM Calculator</title>
+
+    <link rel="stylesheet" href="style.css">
+
+</head>
+
+<body>
+
+    <div class="container">
+
+        <header>
+            <div class="content">
+                <h3><a href="">CDM</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>
+                </div>
+            </div>
+
+        </header>
+
+        <div class="wrapper">
+
+            <div class="wrap-side">
+                <a href="Set-Algebra/index.html" class="calculator">
+                    <img src="img/Set-Algebra.png">
+                    <h1>Set Algebra Calculator</h1>
+                </a>
+            </div>
+
+            <div class="wrap-side">
+                <a href="Boolean-Algebra/index.html" class="calculator">
+                    <img src="img/Boolean-Algebra.png">
+                    <h1>Boolean Algebra Calculator</h1>
+                </a>
+            </div>
+
+</body>
+
+</html>

style.css

@@ -3,6 +3,7 @@
     margin: 0;
     border: 0;
 }
+
 *,
 *:before,
 *:after {
@@ -82,8 +83,7 @@ h4,
 h5,
 h6 {
     font-size: 18px;
-    font-weight: 400;
+    font-family: Myriad-L, sans-serif;
-    font-family: Roboto, sans-serif;
     color: #fff;
     line-height: 1.2;
 }
@@ -92,7 +92,16 @@ a {
     color: #fff;
 }
 
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+@font-face {
+    font-family: Myriad-L;
+    src: url(fonts/MyriadPro-Light.ttf);
+}
+
+@font-face {
+    font-family: Myriad-R;
+    src: url(fonts/MyriadPro-Regular.woff);
+}
+
 
 /* ------------------------------------------------------------------ */
 
@@ -100,6 +109,7 @@ h1 {
     color: #fff;
     margin: 0 auto;
     margin-bottom: 10px;
+    letter-spacing: 0.75px;
 }
 
 h6 {
@@ -108,6 +118,10 @@ h6 {
     text-align: center;
 }
 
+h3 {
+    letter-spacing: 0.5px;
+}
+
 h2 {
     font-weight: 300;
 }
@@ -192,6 +206,7 @@ body {
 .text {
     margin: auto 0;
     white-space: pre;
+    letter-spacing: 0.75px;
 }
 
 .input {
@@ -206,7 +221,7 @@ input[type=value] {
     border: 3px solid rgba(255, 255, 255, 0.2);
     border-radius: 8px;
     font-size: 18px;
-    font-family: Roboto;
+    font-family: Myriad-R;
     color: #fff;
     margin: 5px auto;
     padding: 0px 0px 0px 10px;
@@ -232,7 +247,13 @@ input[type=button] {
     border-radius: 22px;
     cursor: pointer;
     font-size: 18px;
-    font-family: Roboto;
+    font-family: Myriad-R;
+    transition: 1s;
+}
+
+input[type=button]:hover {
+    background-color: rgba(255, 255, 255, 0.7);
+    transition: 1s;
 }
 
 input[type=result] {
@@ -243,7 +264,7 @@ input[type=result] {
     color: white;
     border-radius: 8px;
     font-size: 18px;
-    font-family: Roboto;
+    font-family: Myriad-R;
     cursor: default;
     padding: 0px 0px 0px 10px;
 }
@@ -256,7 +277,7 @@ input[type=result] {
 ::placeholder {
     color: rgba(255, 255, 255, 0.35);
     font-size: 18px;
-    font-family: Roboto;
+    font-family: Myriad-R;
 }
 
 .addSet,
@@ -266,6 +287,7 @@ input[type=result] {
 
 .buttons {
     margin: 0 auto;
+    display: flex;
 }
 
 .button {
@@ -307,6 +329,38 @@ input[type=result] {
     display: none;
 }
 
+
+/* ------------------Main-------------- */
+
+.calculator {
+    display: flex;
+    flex-direction: column;
+    margin: 20px auto;
+    width: 90%;
+    max-width: 250px;
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 20px;
+    padding: 20px;
+    transition: 1s;
+}
+
+.calculator img {
+    height: 100px;
+    margin: 20px auto;
+}
+
+.calculator:hover {
+    background-color: rgba(255, 255, 255, 0.5);
+    transition: 1s;
+}
+
+.calculator h1 {
+    margin: 0 auto;
+    text-align: center;
+    font-size: 23px;
+    max-width: 200px;
+}
+
 @media screen and (max-device-width: 650px) and (min-device-width: 0px) {
     .wrapper {
         flex-direction: column;
@@ -316,4 +370,11 @@ input[type=result] {
         width: 85%;
         margin: 20px auto;
     }
+    .buttons {
+        flex-direction: column;
+        margin-top: 15px;
+    }
+    .button {
+        margin: 10px auto;
+    }
 }