-
-
-
-
-
-
-
+ node.insertAdjacentHTML('beforeend', `
`);
+
} else {
- console.log('You have reached a limint of available sets');
+ alert('You have reached a limint of available sets');
}
}
function DeleteSet(setNum) {
-
+
let setField = document.querySelector(`#setfield${setNum}`);
setField.remove();
currNum--;
let delBtn = document.querySelectorAll('#delBtn');
if (delBtn[delBtn.length - 1]) {
- delBtn[delBtn.length - 1].style="display: inline-block;";
+ delBtn[delBtn.length - 1].style = "display: inline-block;";
}
}
let universalSet = new Set();
-function Complement (set) {
+function Complement(set) {
let _complement = new Set();
@@ -52,7 +48,7 @@ function Complement (set) {
return _complement;
}
-function Intersection (set1, set2) {
+function Intersection(set1, set2) {
let _intersection = new Set();
@@ -65,7 +61,7 @@ function Intersection (set1, set2) {
return _intersection;
}
-function Union (set1, set2) {
+function Union(set1, set2) {
let _union = new Set(set1);
@@ -76,12 +72,12 @@ function Union (set1, set2) {
return _union;
}
-function Difference (set1, set2) {
+function Difference(set1, set2) {
let _difference = new Set(set1);
set2.forEach(element => {
-
+
if (_difference.has(element)) {
_difference.delete(element);
}
@@ -98,7 +94,7 @@ let SETSNAMES = new Set();
let SETS = new Array();
function Evaluate() {
-
+
FetchSets();
let formulaString = document.getElementById('formula').value;
@@ -109,7 +105,7 @@ function Evaluate() {
let result = SolveRPNFormula(RPN_Array);
let readableResult = ConvertToReadableResult(result);
-
+
let resultField = document.getElementById('result');
resultField.value = readableResult;
@@ -126,7 +122,7 @@ function ConvertFormulaCharArrayToRPN(chars) {
let actionsStack = new Array();
chars.forEach(element => {
-
+
if (SETSNAMES.has(element)) {
setsStack.push(GetSetFromIndex(element));
@@ -181,7 +177,7 @@ function ConvertFormulaCharArrayToRPN(chars) {
function SolveRPNFormula(RPN_Array) {
- let stack = new Array();
+ let stack = new Array();
for (let i = 0; i < RPN_Array.length; i++) {
const element = RPN_Array[i];
@@ -189,35 +185,35 @@ function SolveRPNFormula(RPN_Array) {
if (OPERATORS.has(element)) {
if (element == '~' || element == '!') {
-
+
let currSet = stack.pop();
let result = Complement(currSet);
- stack.push(result);
+ stack.push(result);
} else if (element == '∩' || element == '/') {
-
+
let secondSet = stack.pop();
let firstSet = stack.pop();
-
+
let result = Intersection(firstSet, secondSet);
-
+
stack.push(result);
} else if (element == '∪' || element == '+') {
let secondSet = stack.pop();
let firstSet = stack.pop();
-
+
let result = Union(firstSet, secondSet);
-
+
stack.push(result);
} else if (element == '-') {
let secondSet = stack.pop();
let firstSet = stack.pop();
-
+
let result = Difference(firstSet, secondSet);
-
+
stack.push(result);
}
} else {
@@ -238,21 +234,21 @@ function FetchSets() {
for (let i = 0; i < currNum; i++) {
let inputField = document.getElementById(`set${i}`);
-
+
let numArray;
if (inputField != undefined && inputField.value.length != 0) {
numArray = inputField.value.split(',');
numArray.sort();
-
+
let newSet = new Set();
-
+
numArray.forEach(element => {
-
+
newSet.add(+element);
universalArray.push(+element);
});
-
+
SETSNAMES.add(String.fromCharCode(65 + i));
SETS.push(newSet);
} else {
@@ -269,7 +265,7 @@ function FetchSets() {
function GetSetFromIndex(index) {
let unicode = index.charCodeAt(0);
-
+
let num = unicode - 65;
return SETS[num];
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..47d4969
--- /dev/null
+++ b/style.css
@@ -0,0 +1,316 @@
+* {
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
+
+*,
+*:before,
+*:after {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+:focus,
+:active {
+ outline: none;
+}
+
+a:focus,
+a:active {
+ outline: none;
+}
+
+nav,
+footer,
+header,
+aside {
+ display: block;
+}
+
+html,
+body {
+ height: 100%;
+ width: 100%;
+ font-size: 100%;
+ line-height: 1;
+ font-size: 14px;
+ -ms-text-size-adjust: 100%;
+ -moz-text-size-adjust: 100%;
+}
+
+input,
+button,
+textarea {
+ font-family: inherit;
+}
+
+input::-ms-clear {
+ display: none;
+}
+
+button {
+ cursor: pointer;
+}
+
+button::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+}
+
+a,
+a:visited {
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: none;
+}
+
+ul li {
+ list-style: none;
+}
+
+img {
+ vertical-align: top;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-size: 18px;
+ font-weight: 400;
+ font-family: Roboto, sans-serif;
+ color: #fff;
+ line-height: 1.2;
+}
+
+a {
+ color: #fff;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+
+/* ------------------------------------------------------------------ */
+
+h1 {
+ color: #fff;
+ margin: 0 auto;
+ margin-bottom: 10px;
+}
+
+h6 {
+ font-weight: 300;
+ color: rgba(255, 255, 255, 0.7);
+ text-align: center;
+}
+
+h2 {
+ font-weight: 300;
+}
+
+
+/* ----------------------------Top Menu--------------------------------- */
+
+header {
+ width: 100%;
+ height: 45px;
+ background-color: rgba(255, 255, 255, 0.3);
+ display: flex;
+}
+
+.content {
+ width: 92%;
+ margin: auto auto;
+ display: flex;
+ justify-content: space-between;
+}
+
+.theme {
+ display: flex;
+}
+
+.theme a {
+ margin-left: 20px;
+ font-size: 15px;
+}
+
+
+/* ----------------------------------------------------------------- */
+
+body {
+ background: #E71F65;
+}
+
+.container {
+ width: 100%;
+ display: flex;
+ background: linear-gradient(#2394F0, #E71F65);
+ flex-direction: column;
+}
+
+.wrapper {
+ display: flex;
+ margin: 30px auto;
+ width: 92%;
+ max-width: 1000px;
+ background-color: rgba(255, 255, 255, 0.3);
+ border-radius: 12px;
+ filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.3));
+ padding: 0px 20px;
+}
+
+.wrap-side {
+ display: flex;
+ flex-direction: column;
+ margin: 40px 40px;
+ width: 50%;
+}
+
+.set {
+ width: 90%;
+ margin: 0 auto;
+ padding: 5px;
+}
+
+#sets {
+ display: flex;
+ flex-direction: column;
+}
+
+.input-wrap {
+ margin: 0;
+ display: flex;
+ flex-direction: row;
+}
+
+.text {
+ margin: auto 0;
+ white-space: pre;
+}
+
+.input {
+ width: 100%;
+}
+
+input[type=set] {
+ width: 100%;
+ height: 44px;
+ background: none;
+ border: 3px solid rgba(255, 255, 255, 0.2);
+ border-radius: 8px;
+ font-size: 18px;
+ font-family: Roboto;
+ color: #fff;
+ margin: 5px auto;
+ padding: 0px 0px 0px 10px;
+}
+
+input[type=problem] {
+ width: 100%;
+ height: 44px;
+ background: none;
+ border: 3px solid rgba(255, 255, 255, 0.2);
+ border-radius: 8px;
+ font-size: 18px;
+ color: #fff;
+ padding: 0px 0px 0px 10px;
+ margin-top: 5px;
+}
+
+input[type=button] {
+ height: 40px;
+ padding: 0 25px 0 25px;
+ background: rgba(255, 255, 255, 0.45);
+ color: white;
+ border-radius: 22px;
+ cursor: pointer;
+ font-size: 18px;
+ font-family: Roboto;
+}
+
+input[type=result] {
+ height: 44px;
+ width: 100%;
+ margin: 10px 0;
+ background: rgba(255, 255, 255, 0.45);
+ color: white;
+ border-radius: 8px;
+ font-size: 18px;
+ font-family: Roboto;
+ cursor: default;
+ padding: 0px 0px 0px 10px;
+}
+
+.wrap-result {
+ width: 100%;
+ margin: 20px 0;
+}
+
+::placeholder {
+ color: rgba(255, 255, 255, 0.35);
+ font-size: 18px;
+ font-family: Roboto;
+}
+
+.addSet {
+ margin: 20px auto;
+}
+
+.buttons {
+ margin: 0 auto;
+}
+
+.button {
+ margin: 15px 5px 5px 5px;
+}
+
+.description {
+ width: 90%;
+ margin: 0 auto;
+}
+
+.operations {
+ display: flex;
+ flex-direction: column;
+ margin: 30px auto;
+}
+
+.operation {
+ display: flex;
+ margin: 5px;
+}
+
+.operation-bg {
+ background: rgba(255, 255, 255, 0.2);
+ width: 22px;
+ height: 22px;
+ border-radius: 11px;
+ margin-right: 8px;
+}
+
+.step-by-step {
+ width: 100%;
+ margin: 40px 50px;
+ display: flex;
+ flex-direction: column;
+}
+
+.hide {
+ display: none;
+}
+
+@media screen and (max-device-width: 650px) and (min-device-width: 0px) {
+ .wrapper {
+ flex-direction: column;
+ padding: 0;
+ }
+ .wrap-side {
+ width: 85%;
+ margin: 20px auto;
+ }
+}
\ No newline at end of file