+ 
-
Step by step
@@ -100,16 +103,24 @@
+
+
- Truth Table
-
+
+
+
+
+
+
+
+
+
-
Perfect Disjunctive Normal Form
@@ -118,7 +129,8 @@
+
+
`);
+
+ 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 0000000..f0b89ba
Binary files /dev/null and b/img/cross-close-icon.png differ
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
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', `
`);
+
+ 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) {
-
+
`);
+ 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) {