From f7f87b5167d3761ac76faecd11ad7fac71b7fa49 Mon Sep 17 00:00:00 2001 From: Shchoholiev Date: Fri, 10 Dec 2021 18:54:46 +0200 Subject: [PATCH 1/3] 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 From 728cc292d7238ce7547bf8cdd49b9c1dd89803ff Mon Sep 17 00:00:00 2001 From: Shchoholiev Date: Fri, 10 Dec 2021 19:01:04 +0200 Subject: [PATCH 2/3] new css --- style.css | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 73 insertions(+), 3 deletions(-) diff --git a/style.css b/style.css index 2dec084..5d63359 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,47 @@ input[type=result] { font-family: Myriad-R; cursor: default; padding: 0px 0px 0px 10px; + text-overflow: clip; +} + +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 +368,7 @@ input[type=result] { .step-by-step { width: 100%; - margin: 40px 50px; + margin: 25px 38px 40px 50px; display: flex; flex-direction: column; } @@ -329,6 +377,28 @@ 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; From 97f7cb461a52852aa2a5724ae7962c0c9cbd117a Mon Sep 17 00:00:00 2001 From: Shchoholiev Date: Fri, 10 Dec 2021 19:03:40 +0200 Subject: [PATCH 3/3] html fix --- Set-Algebra/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Set-Algebra/index.html b/Set-Algebra/index.html index 62c7e6b..9dd5abf 100644 --- a/Set-Algebra/index.html +++ b/Set-Algebra/index.html @@ -14,6 +14,8 @@ +
+