From 0f3596b2b29d7d40e5fe09996994084b740b8f82 Mon Sep 17 00:00:00 2001 From: cuqmbr Date: Fri, 10 Dec 2021 15:35:45 +0200 Subject: [PATCH] logic fixes, UX improvements --- Boolean-Algebra/index.html | 22 ++++++++--- Boolean-Algebra/script.js | 69 +++++++++++++++++++++----------- img/cross-close-icon.png | Bin 0 -> 23709 bytes style.css | 79 +++++++++++++++++++++++++++++++++++-- 4 files changed, 139 insertions(+), 31 deletions(-) create mode 100644 img/cross-close-icon.png diff --git a/Boolean-Algebra/index.html b/Boolean-Algebra/index.html index 5ed9e16..12de023 100644 --- a/Boolean-Algebra/index.html +++ b/Boolean-Algebra/index.html @@ -14,6 +14,8 @@ +
+
@@ -90,7 +92,8 @@
-
+
+

Step by step

@@ -100,16 +103,24 @@
-
+
+

Truth Table

-
+
+
+
+
+
+
+
-
+
+

Perfect Disjunctive Normal Form

@@ -118,7 +129,8 @@
-
+
+

Perfect Conjunctive Normal Form

diff --git a/Boolean-Algebra/script.js b/Boolean-Algebra/script.js index 969379c..7a828fc 100644 --- a/Boolean-Algebra/script.js +++ b/Boolean-Algebra/script.js @@ -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', `

-
+
`); + 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', `

-
+
`); } + + 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) {

`); + + 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) {

`); + + 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(['(', ')']); diff --git a/img/cross-close-icon.png b/img/cross-close-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..f0b89ba3b8df66e13763cd35afb50581612cb3c5 GIT binary patch literal 23709 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 literal 0 HcmV?d00001 diff --git a/style.css b/style.css index d2b992a..93f6c7f 100644 --- a/style.css +++ b/style.css @@ -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 { @@ -382,4 +449,8 @@ input[type=result] { .button { margin: 10px auto; } + .step-by-step { + width: auto; + text-align: center; + } } \ No newline at end of file