cuqmbr/cdm-utils
1
0
Fork 0
Code Issues Pull Requests Activity

Merge branch 'set-algebra'

Browse Source
This commit is contained in:
Shchoholiev 2021-12-10 19:56:37 +02:00
commit ddfae96195
2 changed files with 70 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
Set-Algebra/index.html
View File

@ -16,39 +16,40 @@
<div class="gradient"></div>
<div class="container">
<div class="container" id="container">
<header>
<div class="content">
<h3><a href="..">CDM</a></h3>
<h3><a href="../index.html">CDM</a></h3>
<div class="theme">
<h3><a href="">Set Algebra</a></h3>
<h3><a href="../Boolean-Algebra">Boolean Algebra</a></h3>
<h3><a href="" class="current">Set Algebra</a></h3>
<h3><a href="../Boolean-Algebra/index.html">Boolean Algebra</a></h3>
</div>
</div>
</header>
<div class="wrapper">
<h1 class="title">Set Algebra Calculator</h1>
<div class="wrapper no-top-margin">
<div class="wrap-side">
<h1>Sets</h1>
<div id="sets">
<div class="input-wrap">
<h1 class="text">Set A = </h1>
<div class="input"><input type="set" onkeydown="return checkInputSet(event.key, this.value)" id="set0" placeholder="1,2,3" /></div>
<div class="input"><input type="set" onkeydown="return checkInputSet(event.key, this.value, this.id)" id="set0" placeholder="1,2,3" /></div>
</div>
<div class="input-wrap">
<h1 class="text">Set B = </h1>
<div class="input"><input type="set" onkeydown="return checkInputSet(event.key, this.value)" id="set1" placeholder="Define set" /></div>
<div class="input"><input type="set" onkeydown="return checkInputSet(event.key, this.value, this.id)" id="set1" placeholder="Define set" /></div>
</div>
</div>
<input class="addSet" type="button" value="Add Set" onclick="AddSet()" />
</div>
<div class="wrap-side">
<h1>Problem</h1>
<h2><input type="problem" id="formula" onkeydown="return checkInputProblem(event.key)" placeholder="!A-C+B/U" /></h2>
<h1>Formula</h1>
<h2><input type="problem" id="formula" onkeydown="return checkInputProblem(event.key, this.id)" placeholder="!A-C+B/U" /></h2>
<div class="buttons">
<input class="button" type="button" id="calculate" value="Evaluate" onclick="Evaluate(true)" />
<input class="button" type="button" id="calculate" value="Step by step" onclick="stepByStep()" />
@ -59,23 +60,23 @@
<div class="input"><input type="result" id="result" readonly/></div>
</div>
</div>
<h6 class="description">Define sets: A, B, C, and Universal set. Then write the problem you need to solve. </h6>
<h6 class="description">Set is a collection of elements. <br/> Add up to 26 sets. Define them (leave empty for empty set). Then write the formula you need to solve. </h6>
<h6 class="operations">
<div class="operation">
<div class="operation-bg">!</div>
<h6>Complement</h6>
<h6><strong>Complement</strong> - get set of elements that are in the universal set, but are not in your set.</h6>
</div>
<div class="operation">
<div class="operation-bg">/</div>
<h6>Intersection</h6>
<h6><strong>Intersection</strong> - get set of elements that are both in your sets.</h6>
</div>
<div class="operation">
<div class="operation-bg">+</div>
<h6>Union</h6>
<h6><strong>Union</strong> - get set of all elements that are in your sets.</h6>
</div>
<div class="operation">
<div class="operation-bg">-</div>
<h6>Substraction</h6>
<h6><strong>Substraction</strong>- get set of elements that are in the first set, but not in the second.</h6>
</div>
</h6>
</div>

85
Set-Algebra/script.js
View File

@ -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', ` <div class="input-wrap">
<h1 class="text">Set &#${charNum} = </h1>
<div class="input"><input type="set" onkeydown="return checkInputSet(event.key, this.value)" id="set${charNum - 65}" placeholder="Define set"/></div>
<div class="input"><input type="set" onkeydown="return checkInputSet(event.key, this.value, this.id)" id="set${charNum - 65}" placeholder="Define set"/></div>
</div>`);
} 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', ` <div class="step-by-step" id="steps">
<h1>Step by step</h1>
</div>`);
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;
}