From f7f87b5167d3761ac76faecd11ad7fac71b7fa49 Mon Sep 17 00:00:00 2001 From: Shchoholiev Date: Fri, 10 Dec 2021 18:54:46 +0200 Subject: [PATCH] improved input check, some fixes --- Set-Algebra/index.html | 27 +++++++------- Set-Algebra/script.js | 85 +++++++++++++++++++++++++++--------------- style.css | 31 +++++++++++++++ 3 files changed, 99 insertions(+), 44 deletions(-) diff --git a/Set-Algebra/index.html b/Set-Algebra/index.html index 1152af6..62c7e6b 100644 --- a/Set-Algebra/index.html +++ b/Set-Algebra/index.html @@ -14,39 +14,40 @@ -
+

CDM

-

Set Algebra

+

Set Algebra

Boolean Algebra

-
-
+

Set Algebra Calculator

+ +

Sets

Set A =

-
+

Set B =

-
+
-

Problem

-

+

Formula

+

@@ -57,23 +58,23 @@
-
Define sets: A, B, C, and Universal set. Then write the problem you need to solve.
+
Set is a collection of elements.
Add up to 26 sets. Define them (leave empty for empty set). Then write the formula you need to solve.
!
-
Complement
+
Complement - get set of elements that are in the universal set, but are not in your set.
/
-
Intersection
+
Intersection - get set of elements that are both in your sets.
+
-
Union
+
Union - get set of all elements that are in your sets.
-
-
Substraction
+
Substraction- get set of elements that are in the first set, but not in the second.
diff --git a/Set-Algebra/script.js b/Set-Algebra/script.js index b13cfa8..0b8d6a7 100644 --- a/Set-Algebra/script.js +++ b/Set-Algebra/script.js @@ -6,19 +6,62 @@ function AddSet() { if (currNum < 26) { let charNum = 65 + currNum; + symbols2.push(alphabet[currNum]); currNum++; node = document.getElementById('sets'); node.insertAdjacentHTML('beforeend', `

Set &#${charNum} =

-
+
`); - } else { alert('You have reached a limint of available sets'); } } +//----------------------------- Check Input --------------------------- + +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' +]; + +const symbols = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Shift']; + +function checkInputSet(key, value, id) { + if (value[value.length - 1] == ',' && symbols.indexOf(key) !== -1) { + return true; + } else if (symbols.indexOf(value[value.length - 1]) !== -1 && key == ',') { + return true; + } else if (symbols.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; + } +} + + +let symbols2 = ['A', 'B', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete', 'Shift', + '-', '+', '/', '!', '(', ')' +]; + +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; + } +} + + let universalSet = new Set(); function Complement(set) { @@ -282,19 +325,26 @@ function checkEmpty(set) { return (set == undefined || set.size == 0) ? true : false; } -//----------------------------- Step by Step --------------------------- +//----------------------------- Step by Step ------------------------------------------- function stepByStep() { + if (document.getElementById('formula').value.length < 2) return; + let stepByStep = document.getElementById('stepByStep'); let clear = document.getElementById('steps'); clear.remove(); - step = 0; stepByStep.classList.remove('hide'); stepByStep.insertAdjacentHTML('beforeend', `

Step by step

`); Evaluate(); + + let scrollBody = document.getElementById('container'); + scrollBody.querySelector("#stepByStep").scrollIntoView({ + behavior: "smooth", + block: "center" + }); } let step = 0; @@ -347,31 +397,4 @@ function setToString(set) { } } return '{ ' + str.slice(2, str.length) + ' }'; -} - - -//----------------------------- Check Input --------------------------- - -const symbols = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete']; - -function checkInputSet(key, value) { - if (value[value.length - 1] == ',' && symbols.indexOf(key) !== -1) { - return true; - } else if (symbols.indexOf(value[value.length - 1]) !== -1 && key == ',') { - return true; - } else if (symbols.indexOf(key) !== -1) { - return true; - } else { - 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; } \ No newline at end of file diff --git a/style.css b/style.css index d2b992a..2dec084 100644 --- a/style.css +++ b/style.css @@ -366,6 +366,33 @@ input[type=result] { max-width: 200px; } + +/* ------------------New-------------- */ + +.current { + color: rgba(255, 255, 255, 0.65); +} + +.no-top-margin { + margin-top: 0; +} + +.title { + margin-top: 25px; + margin-bottom: 15px; + font-size: 24px; + font-family: Myriad-R; +} + +.operation h6 { + text-align: left; +} + +.operation-bg { + min-width: 22px; + max-width: 22px; +} + @media screen and (max-device-width: 650px) and (min-device-width: 0px) { .wrapper { flex-direction: column; @@ -382,4 +409,8 @@ input[type=result] { .button { margin: 10px auto; } + .step-by-step { + width: auto; + text-align: center; + } } \ No newline at end of file