cuqmbr/cdm-utils
1
0
Fork 0
Code Issues Pull Requests Activity

commit

Browse Source
This commit is contained in:
cuqmbr 2021-12-02 13:56:11 +02:00
parent 41c75cd99a
commit 13e80e857b
12 changed files with 281 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Lab-2/index.html → Boolean-Algebra/index.html
View File

@ -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()" />

30
Lab-2/script.js → Boolean-Algebra/script.js
View File

@ -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;
}

BIN
Set-Algebra/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 795 B

26
Lab-1/index.html → Set-Algebra/index.html
View File

@ -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">
<title>Lab-1</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<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="Step by step" 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="stepByStep()" />
</div>
<div class="wrap-result">
<div class="input-wrap">
@ -79,13 +79,9 @@
</div>
</div>
<div class="wrapper hide">
<div class="step-by-step">
<div class="wrapper hide" id="stepByStep">
<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>

164
Lab-1/script.js → Set-Algebra/script.js
View File

@ -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) {
let _complement = new Set();
_complement = Difference(universalSet, set);
return _complement;
return (checkEmpty(set)) ? universalSet : Difference(universalSet, set);
}
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(', ');
return converted;
function checkEmpty(set) {
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;
}

BIN
fonts/MyriadPro-Light.ttf Normal file
View File

Binary file not shown.

BIN
fonts/MyriadPro-Light.woff Normal file
View File

Binary file not shown.

BIN
fonts/MyriadPro-Regular.woff Normal file
View File

Binary file not shown.

BIN
img/Boolean-Algebra.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
img/Set-Algebra.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

48
index.html Normal file
View File

@ -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>

75
style.css
View File

@ -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: Roboto, sans-serif;
font-family: Myriad-L, 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;
}
}