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

logic fixes, UX improvements

Browse Source
This commit is contained in:
cuqmbr 2021-12-10 15:35:45 +02:00
parent 00c8014aeb
commit 0f3596b2b2
4 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> <body>
<div class="gradient"></div>
<div class="container"> <div class="container">
<header> <header>
@ -90,7 +92,8 @@
</div> </div>
</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"> <div class="step-by-step" id="stepsWrapper">
<h1>Step by step</h1> <h1>Step by step</h1>
<div class="input-wrap" id="input-wrap"> <div class="input-wrap" id="input-wrap">
@ -100,16 +103,24 @@
</div> </div>
</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"> <div class="step-by-step" id="truthTableWrapper">
<h1>Truth Table</h1> <h1>Truth Table</h1>
<div class="input-wrap" id="input-wrap"> <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>
</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"> <div class="step-by-step" id="pdnfWrapper">
<h1>Perfect Disjunctive Normal Form</h1> <h1>Perfect Disjunctive Normal Form</h1>
<div class="input-wrap" id="input-wrap"> <div class="input-wrap" id="input-wrap">
@ -118,7 +129,8 @@
</div> </div>
</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"> <div class="step-by-step" id="pcnfWrapper">
<h1>Perfect Conjunctive Normal Form</h1> <h1>Perfect Conjunctive Normal Form</h1>
<div class="input-wrap" id="input-wrap"> <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 // Evaluate given formula and display the result
function Evaluate() { function Evaluate() {
ToggleAll(false); // ToggleAll(false);
FetchValues(); FetchValues();
@ -287,7 +287,6 @@ function StepByStep() {
if (stepsResultsArray.length > 0) { if (stepsResultsArray.length > 0) {
ToggleAll(false);
ToggleSteps(true); ToggleSteps(true);
for (let i = 0; i < stepsActionsArray.length; i++) { 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 // Get steps in form of characters
function GetCharSteps(RPNArray) { function GetCharSteps(RPNArray) {
@ -498,7 +499,7 @@ function StepByStep() {
// Generate truth table and display it in the interface // Generate truth table and display it in the interface
function BuildTruthTable() { 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(); let matrix = GenerateTruthTable();
DisplayTruthTable(matrix, header); DisplayTruthTable(matrix, header);
} }
@ -508,7 +509,7 @@ function GenerateTruthTable() {
let formulaField = document.getElementById('formula'); 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); let numRows = Math.pow(2, numColumns);
// Initializing the truthTable // Initializing the truthTable
@ -546,7 +547,7 @@ function GenerateTruthTable() {
//Additional functions //Additional functions
function ConvertCharsToValues(index, row) { 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; return truthTable;
@ -556,25 +557,34 @@ function GenerateTruthTable() {
function DisplayTruthTable(matrix, header) { function DisplayTruthTable(matrix, header) {
//Display the truth table in the interface //Display the truth table in the interface
ToggleAll(false);
ToggleTruthTable(true); 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> <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>`); </div>`);
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';
}
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> <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>`); </div>`);
} }
truthTableWrapper.scrollIntoView({behavior:'smooth', block: 'center'});
} }
//#endregion //#endregion
@ -591,7 +601,7 @@ function GeneratePDNF() {
let pdnf = ''; let pdnf = '';
let mintermCount = 0; 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(); let matrix = GenerateTruthTable();
for (let r = 0; r < matrix.length; r++) { for (let r = 0; r < matrix.length; r++) {
@ -614,7 +624,6 @@ function GeneratePDNF() {
function DisplayPDNF(pdnf) { function DisplayPDNF(pdnf) {
ToggleAll(false);
TogglePDNF(true); TogglePDNF(true);
let Wrapper = document.querySelector('#pdnfWrapper'); let Wrapper = document.querySelector('#pdnfWrapper');
@ -623,6 +632,8 @@ function DisplayPDNF(pdnf) {
<h1 class="text"></h1> <h1 class="text"></h1>
<div class="input"><input type="result" value="${pdnf}" readonly/></div> <div class="input"><input type="result" value="${pdnf}" readonly/></div>
</div>`); </div>`);
Wrapper.scrollIntoView({behavior:'smooth', block: 'center'});
} }
@ -636,7 +647,8 @@ function GeneratePCNF() {
let pcnf = ''; let pcnf = '';
let maxtermCount = 0; 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(); let matrix = GenerateTruthTable();
for (let r = 0; r < matrix.length; r++) { for (let r = 0; r < matrix.length; r++) {
@ -659,7 +671,6 @@ function GeneratePCNF() {
function DisplayPCNF(pcnf) { function DisplayPCNF(pcnf) {
ToggleAll(false);
TogglePCNF(true); TogglePCNF(true);
let Wrapper = document.querySelector('#pcnfWrapper'); let Wrapper = document.querySelector('#pcnfWrapper');
@ -668,6 +679,8 @@ function DisplayPCNF(pcnf) {
<h1 class="text"></h1> <h1 class="text"></h1>
<div class="input"><input type="result" value="${pcnf}" readonly/></div> <div class="input"><input type="result" value="${pcnf}" readonly/></div>
</div>`); </div>`);
Wrapper.scrollIntoView({behavior:'smooth', block: 'center'});
} }
//#endregion //#endregion
@ -680,11 +693,14 @@ function ToggleSteps(show) {
if (show) { if (show) {
Node.classList.remove('hide'); Node.classList.remove('hide');
Node.classList.remove('close');
Wrapper.querySelectorAll('#input-wrap').forEach((element) => { Wrapper.querySelectorAll('#input-wrap').forEach((element) => {
element.remove(); element.remove();
}); });
} else { } 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) { if (show) {
Node.classList.remove('hide'); Node.classList.remove('hide');
Node.classList.remove('close');
Wrapper.querySelectorAll('#input-wrap').forEach((element) => { Wrapper.querySelectorAll('#input-wrap').forEach((element) => {
element.remove(); element.remove();
}); });
} else { } 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) { if (show) {
Node.classList.remove('hide'); Node.classList.remove('hide');
Node.classList.remove('close');
Wrapper.querySelectorAll('#input-wrap').forEach((element) => { Wrapper.querySelectorAll('#input-wrap').forEach((element) => {
element.remove(); element.remove();
}); });
} else { } 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) { if (show) {
Node.classList.remove('hide'); Node.classList.remove('hide');
Node.classList.remove('close');
Wrapper.querySelectorAll('#input-wrap').forEach((element) => { Wrapper.querySelectorAll('#input-wrap').forEach((element) => {
element.remove(); element.remove();
}); });
} else { } 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) { // function ToggleAll(show) {
ToggleSteps(show); // ToggleSteps(show);
ToggleTruthTable(show); // ToggleTruthTable(show);
TogglePDNF(show); // TogglePDNF(show);
TogglePCNF(show); // TogglePCNF(show);
} // }
const OPERATORS = new Set(['!', '*', '+', '>', '=']); const OPERATORS = new Set(['!', '*', '+', '>', '=']);
const BRACKETS = new Set(['(', ')']); const BRACKETS = new Set(['(', ')']);

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

79
style.css
View File

@ -156,13 +156,20 @@ header {
/* ----------------------------------------------------------------- */ /* ----------------------------------------------------------------- */
body { body {
background: #E71F65; background: #eb3474;
}
.gradient {
width: 100%;
height: 100%;
background: linear-gradient(#2394F0, #eb3474);
position: absolute;
z-index: -99;
} }
.container { .container {
width: 100%; width: 100%;
display: flex; display: flex;
background: linear-gradient(#2394F0, #E71F65);
flex-direction: column; flex-direction: column;
} }
@ -267,6 +274,45 @@ input[type=result] {
font-family: Myriad-R; font-family: Myriad-R;
cursor: default; cursor: default;
padding: 0px 0px 0px 10px; 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 { .wrap-result {
@ -320,7 +366,7 @@ input[type=result] {
.step-by-step { .step-by-step {
width: 100%; width: 100%;
margin: 40px 50px; margin: 25px 38px 40px 50px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -329,12 +375,33 @@ input[type=result] {
display: none; 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 { .input-wrap img {
margin: auto 10px; margin: auto 10px;
height: 50px; height: 50px;
} }
/* ------------------Main-------------- */ /* ------------------Main-------------- */
.calculator { .calculator {
@ -382,4 +449,8 @@ input[type=result] {
.button { .button {
margin: 10px auto; margin: 10px auto;
} }
.step-by-step {
width: auto;
text-align: center;
}
} }