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

improved input check, some fixes

Browse Source
This commit is contained in:
Shchoholiev 2021-12-10 18:54:46 +02:00
parent 8cdd67409c
commit f7f87b5167
3 changed files with 99 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
Set-Algebra/index.html
View File

@ -14,39 +14,40 @@
<body> <body>
<div class="container"> <div class="container" id="container">
<header> <header>
<div class="content"> <div class="content">
<h3><a href="../index.html">CDM</a></h3> <h3><a href="../index.html">CDM</a></h3>
<div class="theme"> <div class="theme">
<h3><a href="">Set Algebra</a></h3> <h3><a href="" class="current">Set Algebra</a></h3>
<h3><a href="../Boolean-Algebra/index.html">Boolean Algebra</a></h3> <h3><a href="../Boolean-Algebra/index.html">Boolean Algebra</a></h3>
</div> </div>
</div> </div>
</header> </header>
<div class="wrapper"> <h1 class="title">Set Algebra Calculator</h1>
<div class="wrapper no-top-margin">
<div class="wrap-side"> <div class="wrap-side">
<h1>Sets</h1> <h1>Sets</h1>
<div id="sets"> <div id="sets">
<div class="input-wrap"> <div class="input-wrap">
<h1 class="text">Set A = </h1> <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>
<div class="input-wrap"> <div class="input-wrap">
<h1 class="text">Set B = </h1> <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>
</div> </div>
<input class="addSet" type="button" value="Add Set" onclick="AddSet()" /> <input class="addSet" type="button" value="Add Set" onclick="AddSet()" />
</div> </div>
<div class="wrap-side"> <div class="wrap-side">
<h1>Problem</h1> <h1>Formula</h1>
<h2><input type="problem" id="formula" onkeydown="return checkInputProblem(event.key)" placeholder="!A-C+B/U" /></h2> <h2><input type="problem" id="formula" onkeydown="return checkInputProblem(event.key, this.id)" placeholder="!A-C+B/U" /></h2>
<div class="buttons"> <div class="buttons">
<input class="button" type="button" id="calculate" value="Evaluate" onclick="Evaluate(true)" /> <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()" /> <input class="button" type="button" id="calculate" value="Step by step" onclick="stepByStep()" />
@ -57,23 +58,23 @@
<div class="input"><input type="result" id="result" readonly/></div> <div class="input"><input type="result" id="result" readonly/></div>
</div> </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"> <h6 class="operations">
<div class="operation"> <div class="operation">
<div class="operation-bg">!</div> <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>
<div class="operation"> <div class="operation">
<div class="operation-bg">/</div> <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>
<div class="operation"> <div class="operation">
<div class="operation-bg">+</div> <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>
<div class="operation"> <div class="operation">
<div class="operation-bg">-</div> <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> </div>
</h6> </h6>
</div> </div>

85
Set-Algebra/script.js
View File

@ -6,19 +6,62 @@ function AddSet() {
if (currNum < 26) { if (currNum < 26) {
let charNum = 65 + currNum; let charNum = 65 + currNum;
symbols2.push(alphabet[currNum]);
currNum++; currNum++;
node = document.getElementById('sets'); node = document.getElementById('sets');
node.insertAdjacentHTML('beforeend', ` <div class="input-wrap"> node.insertAdjacentHTML('beforeend', ` <div class="input-wrap">
<h1 class="text">Set &#${charNum} = </h1> <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>`); </div>`);
} else { } else {
alert('You have reached a limint of available sets'); 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(); let universalSet = new Set();
function Complement(set) { function Complement(set) {
@ -282,19 +325,26 @@ function checkEmpty(set) {
return (set == undefined || set.size == 0) ? true : false; return (set == undefined || set.size == 0) ? true : false;
} }
//----------------------------- Step by Step --------------------------- //----------------------------- Step by Step -------------------------------------------
function stepByStep() { function stepByStep() {
if (document.getElementById('formula').value.length < 2) return;
let stepByStep = document.getElementById('stepByStep'); let stepByStep = document.getElementById('stepByStep');
let clear = document.getElementById('steps'); let clear = document.getElementById('steps');
clear.remove(); clear.remove();
step = 0; step = 0;
stepByStep.classList.remove('hide'); stepByStep.classList.remove('hide');
stepByStep.insertAdjacentHTML('beforeend', ` <div class="step-by-step" id="steps"> stepByStep.insertAdjacentHTML('beforeend', ` <div class="step-by-step" id="steps">
<h1>Step by step</h1> <h1>Step by step</h1>
</div>`); </div>`);
Evaluate(); Evaluate();
let scrollBody = document.getElementById('container');
scrollBody.querySelector("#stepByStep").scrollIntoView({
behavior: "smooth",
block: "center"
});
} }
let step = 0; let step = 0;
@ -347,31 +397,4 @@ function setToString(set) {
} }
} }
return '{ ' + str.slice(2, str.length) + ' }'; 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;
} }

31
style.css
View File

@ -366,6 +366,33 @@ input[type=result] {
max-width: 200px; 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) { @media screen and (max-device-width: 650px) and (min-device-width: 0px) {
.wrapper { .wrapper {
flex-direction: column; flex-direction: column;
@ -382,4 +409,8 @@ input[type=result] {
.button { .button {
margin: 10px auto; margin: 10px auto;
} }
.step-by-step {
width: auto;
text-align: center;
}
} }