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

put it all together

Browse Source
This commit is contained in:
Shchoholiev 2021-12-10 20:19:45 +02:00
parent ddfae96195
commit 37282c8239
6 changed files with 208 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Boolean-Algebra/index.html
View File

@ -16,31 +16,33 @@
<div class="gradient"></div>
<div class="container">
<div class="container" id="container">
<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">Set Algebra</a></h3>
<h3><a href="">Boolean Algebra</a></h3>
<h3><a href="../Set-Algebra/index.html">Set Algebra</a></h3>
<h3><a href="" class="current">Boolean Algebra</a></h3>
</div>
</div>
</header>
<div class="wrapper">
<h1 class="title">Boolean Algebra Calculator</h1>
<div class="wrapper no-top-margin">
<div class="wrap-side">
<h1>Values</h1>
<div id="values">
<div class="input-wrap">
<h1 class="text">Value A = </h1>
<div class="input"><input type="value" id="value0" onkeydown="return checkInputValue(event.key, this.value)" placeholder="e.g. 0 or 1" /></div>
<div class="input"><input type="value" id="value0" onkeydown="return checkInputValue(event.key, this.value, this.id)" 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" onkeydown="return checkInputValue(event.key, this.value)" placeholder="e.g. 0 or 1" /></div>
<div class="input"><input type="value" id="value1" onkeydown="return checkInputValue(event.key, this.value, this.id)" placeholder="e.g. 0 or 1" /></div>
</div>
</div>
<input class="addValue" type="button" value="Add Value" onclick="AddValue()" />
@ -48,7 +50,7 @@
<div class="wrap-side">
<h1>Formulua</h1>
<h2><input type="problem" id="formula" onkeydown="return checkInputProblem(event.key)" placeholder="e.g. !A*(B+C)" /></h2>
<h2><input type="problem" id="formula" onkeydown="return checkInputProblem(event.key, this.id)" 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()" />

102
Boolean-Algebra/script.js
View File

@ -8,17 +8,18 @@ function AddValue() {
if (currNumOfValues < 26) {
let charNum = 65 + currNumOfValues;
symbols2.push(alphabet[currNumOfValues]);
currNumOfValues++;
let delBtn = document.querySelectorAll('#delBtn');
if (delBtn[delBtn.length - 1]) {
delBtn[delBtn.length - 1].style="display: none;";
delBtn[delBtn.length - 1].style = "display: none;";
}
node = document.getElementById('values');
node.insertAdjacentHTML('beforeend', ` <div class="input-wrap">
<h1 class="text">Value &#${charNum} = </h1>
<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 class="input"><input type="value" onkeydown="return checkInputValue(event.key, this.value, this.id)" id="value${currNumOfValues - 1}" placeholder="e.g. 0 or 1"/></div>
</div>`);
} else {
@ -38,7 +39,7 @@ function FetchValues() {
let inputField = document.getElementById(`value${i}`);
let currCharStr = String.fromCharCode(65 + i);
if (inputField.value === '1' || inputField.value === 'true' || inputField.value === 'True'|| inputField.value === 'TRUE' || inputField.value === 't' || inputField.value === 'T') {
if (inputField.value === '1' || inputField.value === 'true' || inputField.value === 'True' || inputField.value === 'TRUE' || inputField.value === 't' || inputField.value === 'T') {
VALUES.add(currCharStr);
userValues.push([currCharStr, true]);
} else if (inputField.value === '0' || inputField.value === 'false' || inputField.value === 'False' || inputField.value === 'FALSE' || inputField.value === 'f' || inputField.value === 'F') {
@ -191,7 +192,7 @@ function SolveRPNFormula(valuesRPNArray) {
let stepByStepResults = new Array();
let _stack = new Array();
let _stack = new Array();
for (let i = 0; i < valuesRPNArray.length; i++) {
const element = valuesRPNArray[i];
@ -301,14 +302,14 @@ function StepByStep() {
}
}
stepsWrapper.scrollIntoView({behavior:'smooth', block: 'center'});
stepsWrapper.scrollIntoView({ behavior: 'smooth', block: 'center' });
// Get steps in form of characters
function GetCharSteps(RPNArray) {
let stepsArray = new Array();
let _stack = new Array();
let _stack = new Array();
for (let i = 0; i < RPNArray.length; i++) {
const element = RPNArray[i];
@ -349,7 +350,7 @@ function StepByStep() {
_result = _firstValue.concat('*').concat(_secondValue);
} else {
_result =
_firstValue.concat('*').concat('(').concat(_secondValue).concat(')');
_firstValue.concat('*').concat('(').concat(_secondValue).concat(')');
}
} else if (_firstValue.length > 2 && _secondValue.length <= 2) {
@ -365,7 +366,8 @@ function StepByStep() {
if (_firstHasExclemMark && _secondHasExclemMark) {
_result = _firstValue.concat('*').concat(_secondValue);
} if (_firstHasExclemMark && !_secondHasExclemMark) {
}
if (_firstHasExclemMark && !_secondHasExclemMark) {
_result = _firstValue.concat('*').concat('(').concat(_secondValue).concat(')');
} else if (!_firstHasExclemMark && _secondHasExclemMark) {
@ -425,7 +427,7 @@ function StepByStep() {
let stepByStepResults = new Array();
let _stack = new Array();
let _stack = new Array();
for (let i = 0; i < valuesRPNArray.length; i++) {
const element = valuesRPNArray[i];
@ -521,7 +523,7 @@ function GenerateTruthTable() {
for (let c = 0; c < numColumns; c++) {
let period = Math.pow(2, numColumns) / Math.pow(2, c+1);
let period = Math.pow(2, numColumns) / Math.pow(2, c + 1);
let zeros = true;
for (let r = 0; r < numRows; r++) {
@ -534,7 +536,7 @@ function GenerateTruthTable() {
truthTable[r][c] = true;
}
if ((r+1) % period == 0) {
if ((r + 1) % period == 0) {
zeros = !zeros;
}
}
@ -556,35 +558,35 @@ function GenerateTruthTable() {
// Display truth table in the interface
function DisplayTruthTable(matrix, header) {
//Display the truth table in the interface
ToggleTruthTable(true);
//Display the truth table in the interface
ToggleTruthTable(true);
let truthTableWrapper = document.querySelector('#truthTableWrapper');
let truthTableWrapper = document.querySelector('#truthTableWrapper');
truthTableWrapper.insertAdjacentHTML('beforeend', ` <div class="input-wrap" id="input-wrap">
truthTableWrapper.insertAdjacentHTML('beforeend', ` <div class="input-wrap" id="input-wrap">
<h1 class="text"></h1>
<div class="input"><input type="table-start" value="${header.join(' ')} : Result" readonly/></div>
</div>`);
let type = 'table-start';
let type = 'table-start';
for (let r = 0; r < matrix.length; r++) {
for (let r = 0; r < matrix.length; r++) {
if (r == matrix.length - 1) {
type = 'table-end';
} else if (type != 0) {
type = 'table-mid';
}
if (r == matrix.length - 1) {
type = 'table-end';
} else if (type != 0) {
type = 'table-mid';
}
let result = matrix[r].pop();
let result = matrix[r].pop();
truthTableWrapper.insertAdjacentHTML('beforeend', ` <div class="input-wrap" id="input-wrap">
truthTableWrapper.insertAdjacentHTML('beforeend', ` <div class="input-wrap" id="input-wrap">
<h1 class="text"></h1>
<div class="input"><input type="${type}" value="${matrix[r].map(x => x = ConvertToReadableResult(x)).join(' ')} : ${ConvertToReadableResult(result)}" readonly/></div>
</div>`);
}
}
truthTableWrapper.scrollIntoView({behavior:'smooth', block: 'center'});
truthTableWrapper.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
//#endregion
@ -633,7 +635,7 @@ function DisplayPDNF(pdnf) {
<div class="input"><input type="result" value="${pdnf}" readonly/></div>
</div>`);
Wrapper.scrollIntoView({behavior:'smooth', block: 'center'});
Wrapper.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
@ -680,7 +682,7 @@ function DisplayPCNF(pcnf) {
<div class="input"><input type="result" value="${pcnf}" readonly/></div>
</div>`);
Wrapper.scrollIntoView({behavior:'smooth', block: 'center'});
Wrapper.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
//#endregion
@ -700,7 +702,7 @@ function ToggleSteps(show) {
} else {
Node.classList.add('close');
setTimeout(() => Node.classList.add('hide'), 600);
document.body.scrollIntoView({behavior:'smooth', block: 'start'});
document.body.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
@ -718,7 +720,7 @@ function ToggleTruthTable(show) {
} else {
Node.classList.add('close');
setTimeout(() => Node.classList.add('hide'), 600);
document.body.scrollIntoView({behavior:'smooth', block: 'start'});
document.body.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
@ -736,7 +738,7 @@ function TogglePDNF(show) {
} else {
Node.classList.add('close');
setTimeout(() => Node.classList.add('hide'), 600);
document.body.scrollIntoView({behavior:'smooth', block: 'start'});
document.body.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
@ -754,7 +756,7 @@ function TogglePCNF(show) {
} else {
Node.classList.add('close');
setTimeout(() => Node.classList.add('hide'), 600);
document.body.scrollIntoView({behavior:'smooth', block: 'start'});
document.body.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
@ -810,25 +812,41 @@ function Error(errMsg) {
const symbols = ['0', '1'];
const specialSymbols = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'];
function checkInputValue(key, value) {
function checkInputValue(key, value, id) {
if (value.length < 1 && symbols.indexOf(key) !== -1) {
return true;
} else if (value.length == 1 && specialSymbols.indexOf(key) !== -1) {
return true;
}
else {
} else {
function backBg() { document.getElementById(id).style.backgroundColor = 'rgba(255, 255, 255, 0)' }
document.getElementById(id).style.backgroundColor = 'rgba(235, 52, 116, 0.7)';
document.getElementById(id).style.transition = '0.2s';
setTimeout(backBg, 600);
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;
function checkInputProblem(key, id) {
if (symbols2.indexOf(key) != -1) {
return true;
} else {
function backBg() { document.getElementById(id).style.backgroundColor = 'rgba(255, 255, 255, 0)' }
document.getElementById(id).style.backgroundColor = 'rgba(235, 52, 116, 0.7)';
document.getElementById(id).style.transition = '0.2s';
setTimeout(backBg, 600);
return false;
}
}
const alphabet = ['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'
];
let symbols2 = ['A', 'B', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Shift',
'-', '+', '/', '!', '(', ')'
];
//#endregion

1
Set-Algebra/index.html
View File

@ -83,6 +83,7 @@
</div>
<div class="wrapper hide" id="stepByStep">
<div class="close-button" onclick="Close()"><img src="../img/cross-close-icon.png" style="width: 12px;"></div>
<div class="step-by-step" id="steps">
<h1>Step by step</h1>
</div>

8
Set-Algebra/script.js
View File

@ -133,6 +133,7 @@ function Evaluate(hide = false) {
FetchSets();
let formulaString = document.getElementById('formula').value;
if (formulaString.length < 1) return;
let charArray = formulaString.split('');
let RPN_Array = ConvertFormulaCharArrayToRPN(charArray);
@ -398,3 +399,10 @@ function setToString(set) {
}
return '{ ' + str.slice(2, str.length) + ' }';
}
function Close() {
let wrapper = document.getElementById("stepByStep")
setTimeout(() => wrapper.classList.add('hide'), 600);
document.body.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

10
index.html
View File

@ -20,10 +20,10 @@
<header>
<div class="content">
<h3><a href="">CDM</a></h3>
<h3><a href="" class="current">CDM</a></h3>
<div class="theme">
<h3><a href="Set-Algebra">Set Algebra</a></h3>
<h3><a href="Boolean-Algebra">Boolean Algebra</a></h3>
<h3><a href="Set-Algebra/index.html">Set Algebra</a></h3>
<h3><a href="Boolean-Algebra/index.html">Boolean Algebra</a></h3>
</div>
</div>
@ -32,14 +32,14 @@
<div class="wrapper">
<div class="wrap-side">
<a href="Set-Algebra" class="calculator">
<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" class="calculator">
<a href="Boolean-Algebra/index.html" class="calculator">
<img src="img/Boolean-Algebra.png">
<h1>Boolean Algebra Calculator</h1>
</a>

2
style.css
View File

@ -182,6 +182,7 @@ body {
border-radius: 12px;
filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.3));
padding: 0px 20px;
transition: 0.5s;
}
.wrap-side {
@ -375,6 +376,7 @@ input[type=table-end] {
.hide {
display: none;
transition: 0.5s;
}
.close {