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

Merge pull request #2 from cuqmbr/boolean-algebra

Browse Source 
merged Boolean-algebra with Master (logic fixes, UX improvements)
This commit is contained in:
cuqmbr 2021-12-10 16:12:35 +02:00 committed by GitHub
commit 6120d9f23d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 139 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
Boolean-Algebra/index.html
View File

@ -14,6 +14,8 @@
<body>
<div class="gradient"></div>
<div class="container">
<header>
@ -90,7 +92,8 @@
</div>
</div>
<div class="wrapper hide" id="stepsNode">
<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>
<div class="step-by-step" id="stepsWrapper">
<h1>Step by step</h1>
<div class="input-wrap" id="input-wrap">
@ -100,16 +103,24 @@
</div>
</div>
<div class="wrapper hide" id="truthTableNode">
<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>
<div class="step-by-step" id="truthTableWrapper">
<h1>Truth Table</h1>
<div class="input-wrap" id="input-wrap">
<div class="input"><input type="result" readonly/></div>
<div class="input"><input type="table-start" id="step1" readonly/></div>
</div>
<div class="input-wrap" id="input-wrap">
<div class="input"><input type="table-mid" id="step1" readonly/></div>
</div>
<div class="input-wrap" id="input-wrap">
<div class="input"><input type="table-end" id="step1" readonly/></div>
</div>
</div>
</div>
<div class="wrapper hide" id="pdnfNode">
<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>
<div class="step-by-step" id="pdnfWrapper">
<h1>Perfect Disjunctive Normal Form</h1>
<div class="input-wrap" id="input-wrap">
@ -118,7 +129,8 @@
</div>
</div>
<div class="wrapper hide" id="pcnfNode">
<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>
<div class="step-by-step" id="pcnfWrapper">
<h1>Perfect Conjunctive Normal Form</h1>
<div class="input-wrap" id="input-wrap">

69
Boolean-Algebra/script.js
View File

@ -55,7 +55,7 @@ function FetchValues() {
// Evaluate given formula and display the result
function Evaluate() {
ToggleAll(false);
// ToggleAll(false);
FetchValues();
@ -287,7 +287,6 @@ function StepByStep() {
if (stepsResultsArray.length > 0) {
ToggleAll(false);
ToggleSteps(true);
for (let i = 0; i < stepsActionsArray.length; i++) {
@ -302,6 +301,8 @@ function StepByStep() {
}
}
stepsWrapper.scrollIntoView({behavior:'smooth', block: 'center'});
// Get steps in form of characters
function GetCharSteps(RPNArray) {
@ -498,7 +499,7 @@ function StepByStep() {
// Generate truth table and display it in the interface
function BuildTruthTable() {
let header = document.getElementById('formula').value.match(/[A-Z]/g);
let header = document.getElementById('formula').value.match(/[A-Z]/g).filter((c, i) => document.getElementById('formula').value.match(/[A-Z]/g).indexOf(c) == i);
let matrix = GenerateTruthTable();
DisplayTruthTable(matrix, header);
}
@ -508,7 +509,7 @@ function GenerateTruthTable() {
let formulaField = document.getElementById('formula');
let numColumns = formulaField.value.match(/[A-Z]/g).length;
let numColumns = formulaField.value.match(/[A-Z]/g).filter((c, i) => document.getElementById('formula').value.match(/[A-Z]/g).indexOf(c) == i).length;
let numRows = Math.pow(2, numColumns);
// Initializing the truthTable
@ -546,7 +547,7 @@ function GenerateTruthTable() {
//Additional functions
function ConvertCharsToValues(index, row) {
return formulaField.value.match(/[A-Z]/g).indexOf(index) != -1 ? truthTable[row][formulaField.value.match(/[A-Z]/g).indexOf(index)] : index;
return formulaField.value.match(/[A-Z]/g).filter((c, i) => document.getElementById('formula').value.match(/[A-Z]/g).indexOf(c) == i).indexOf(index) != -1 ? truthTable[row][formulaField.value.match(/[A-Z]/g).filter((c, i) => document.getElementById('formula').value.match(/[A-Z]/g).indexOf(c) == i).indexOf(index)] : index;
}
return truthTable;
@ -556,25 +557,34 @@ function GenerateTruthTable() {
function DisplayTruthTable(matrix, header) {
//Display the truth table in the interface
ToggleAll(false);
ToggleTruthTable(true);
let truthTableWrapper = document.querySelector('#truthTableWrapper');
truthTableWrapper.insertAdjacentHTML('beforeend', ` <div class="input-wrap" id="input-wrap">
<h1 class="text"></h1>
<div class="input"><input type="result" value="${header.join(' ')} : Result" readonly/></div>
<div class="input"><input type="table-start" value="${header.join(' ')} : Result" readonly/></div>
</div>`);
let type = 'table-start';
for (let r = 0; r < matrix.length; r++) {
if (r == matrix.length - 1) {
type = 'table-end';
} else if (type != 0) {
type = 'table-mid';
}
let result = matrix[r].pop();
truthTableWrapper.insertAdjacentHTML('beforeend', ` <div class="input-wrap" id="input-wrap">
<h1 class="text"></h1>
<div class="input"><input type="result" value="${matrix[r].map(x => x = ConvertToReadableResult(x)).join(' ')} : ${ConvertToReadableResult(result)}" readonly/></div>
<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'});
}
//#endregion
@ -591,7 +601,7 @@ function GeneratePDNF() {
let pdnf = '';
let mintermCount = 0;
let header = document.getElementById('formula').value.match(/[A-Z]/g);
let header = document.getElementById('formula').value.match(/[A-Z]/g).filter((c, i) => document.getElementById('formula').value.match(/[A-Z]/g).indexOf(c) == i);
let matrix = GenerateTruthTable();
for (let r = 0; r < matrix.length; r++) {
@ -614,7 +624,6 @@ function GeneratePDNF() {
function DisplayPDNF(pdnf) {
ToggleAll(false);
TogglePDNF(true);
let Wrapper = document.querySelector('#pdnfWrapper');
@ -623,6 +632,8 @@ function DisplayPDNF(pdnf) {
<h1 class="text"></h1>
<div class="input"><input type="result" value="${pdnf}" readonly/></div>
</div>`);
Wrapper.scrollIntoView({behavior:'smooth', block: 'center'});
}
@ -636,7 +647,8 @@ function GeneratePCNF() {
let pcnf = '';
let maxtermCount = 0;
let header = document.getElementById('formula').value.match(/[A-Z]/g);
let header = document.getElementById('formula').value.match(/[A-Z]/g).filter((c, i) => document.getElementById('formula').value.match(/[A-Z]/g).indexOf(c) == i);
let matrix = GenerateTruthTable();
for (let r = 0; r < matrix.length; r++) {
@ -659,7 +671,6 @@ function GeneratePCNF() {
function DisplayPCNF(pcnf) {
ToggleAll(false);
TogglePCNF(true);
let Wrapper = document.querySelector('#pcnfWrapper');
@ -668,6 +679,8 @@ function DisplayPCNF(pcnf) {
<h1 class="text"></h1>
<div class="input"><input type="result" value="${pcnf}" readonly/></div>
</div>`);
Wrapper.scrollIntoView({behavior:'smooth', block: 'center'});
}
//#endregion
@ -680,11 +693,14 @@ function ToggleSteps(show) {
if (show) {
Node.classList.remove('hide');
Node.classList.remove('close');
Wrapper.querySelectorAll('#input-wrap').forEach((element) => {
element.remove();
});
} else {
Node.classList.add('hide');
Node.classList.add('close');
setTimeout(() => Node.classList.add('hide'), 600);
document.body.scrollIntoView({behavior:'smooth', block: 'start'});
}
}
@ -695,11 +711,14 @@ function ToggleTruthTable(show) {
if (show) {
Node.classList.remove('hide');
Node.classList.remove('close');
Wrapper.querySelectorAll('#input-wrap').forEach((element) => {
element.remove();
});
} else {
Node.classList.add('hide');
Node.classList.add('close');
setTimeout(() => Node.classList.add('hide'), 600);
document.body.scrollIntoView({behavior:'smooth', block: 'start'});
}
}
@ -710,11 +729,14 @@ function TogglePDNF(show) {
if (show) {
Node.classList.remove('hide');
Node.classList.remove('close');
Wrapper.querySelectorAll('#input-wrap').forEach((element) => {
element.remove();
});
} else {
Node.classList.add('hide');
Node.classList.add('close');
setTimeout(() => Node.classList.add('hide'), 600);
document.body.scrollIntoView({behavior:'smooth', block: 'start'});
}
}
@ -725,20 +747,23 @@ function TogglePCNF(show) {
if (show) {
Node.classList.remove('hide');
Node.classList.remove('close');
Wrapper.querySelectorAll('#input-wrap').forEach((element) => {
element.remove();
});
} else {
Node.classList.add('hide');
Node.classList.add('close');
setTimeout(() => Node.classList.add('hide'), 600);
document.body.scrollIntoView({behavior:'smooth', block: 'start'});
}
}
function ToggleAll(show) {
ToggleSteps(show);
ToggleTruthTable(show);
TogglePDNF(show);
TogglePCNF(show);
}
// function ToggleAll(show) {
// ToggleSteps(show);
// ToggleTruthTable(show);
// TogglePDNF(show);
// TogglePCNF(show);
// }
const OPERATORS = new Set(['!', '*', '+', '>', '=']);
const BRACKETS = new Set(['(', ')']);

2
Set-Algebra/index.html
View File

@ -14,6 +14,8 @@
<body>
<div class="gradient"></div>
<div class="container">
<header>

BIN
img/cross-close-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

2
index.html
View File

@ -14,6 +14,8 @@
<body>
<div class="gradient"></div>
<div class="container">
<header>

75
style.css
View File

@ -156,13 +156,20 @@ header {
/* ----------------------------------------------------------------- */
body {
background: #E71F65;
background: #eb3474;
}
.gradient {
width: 100%;
height: 100%;
background: linear-gradient(#2394F0, #eb3474);
position: absolute;
z-index: -99;
}
.container {
width: 100%;
display: flex;
background: linear-gradient(#2394F0, #E71F65);
flex-direction: column;
}
@ -267,6 +274,45 @@ input[type=result] {
font-family: Myriad-R;
cursor: default;
padding: 0px 0px 0px 10px;
text-overflow: ellipsis;
}
input[type=table-start] {
height: 44px;
width: 100%;
margin: 0px 0;
background: rgba(255, 255, 255, 0.45);
color: white;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
font-size: 18px;
font-family: Myriad-R;
cursor: default;
padding: 0px 0px 0px 10px;
}
input[type=table-mid] {
height: 44px;
width: 100%;
margin: 0px 0;
background: rgba(255, 255, 255, 0.45);
color: white;
font-size: 18px;
font-family: Myriad-R;
cursor: default;
padding: 0px 0px 0px 10px;
}
input[type=table-end] {
height: 44px;
width: 100%;
margin: 0px 0;
background: rgba(255, 255, 255, 0.45);
color: white;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
font-size: 18px;
font-family: Myriad-R;
cursor: default;
padding: 0px 0px 0px 10px;
}
.wrap-result {
@ -320,7 +366,7 @@ input[type=result] {
.step-by-step {
width: 100%;
margin: 40px 50px;
margin: 25px 38px 40px 50px;
display: flex;
flex-direction: column;
}
@ -329,12 +375,33 @@ input[type=result] {
display: none;
}
.close {
transition: 0.75s;
opacity: 0;
}
.close-button {
position: absolute;
right: 2%;
transform: translate(0, -3px);
margin: 25px 5px 0px 0px;
cursor: pointer;
width: 12px;
height: 12px;
opacity: 75%;
transition: 0.5s;
}
.close-button:hover {
opacity: 95%;
transition: 0.5s;
}
.input-wrap img {
margin: auto 10px;
height: 50px;
}
/* ------------------Main-------------- */
.calculator {