changes
This commit is contained in:
JeoJake
commit
0d84330e72
98
Lab-1/index.html
Normal file
98
Lab-1/index.html
Normal file
@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Lab-1</title>
|
||||
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<header>
|
||||
<div class="content">
|
||||
<h3><a href="">CDM</a></h3>
|
||||
<div class="theme">
|
||||
<h3><a href="">Set Algebra</a></h3>
|
||||
<h3><a href="">Boolean Algebra</a></h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
<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" id="set0" placeholder="1,2,3" /></div>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<h1 class="text">Set B = </h1>
|
||||
<div class="input"><input type="set" 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" placeholder="!A-C+B/U" /></h2>
|
||||
<div class="buttons">
|
||||
<input class="button" type="button" id="calculate" value="Evaluate" onclick="Evaluate()" />
|
||||
<input class="button" type="button" id="calculate" value="Step by step" onclick="Evaluate()" />
|
||||
</div>
|
||||
<div class="wrap-result">
|
||||
<div class="input-wrap">
|
||||
<h1 class="text">Result </h1>
|
||||
<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="operations">
|
||||
<div class="operation">
|
||||
<div class="operation-bg">!</div>
|
||||
<h6>Complement</h6>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="operation-bg">/</div>
|
||||
<h6>Intersection</h6>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="operation-bg">+</div>
|
||||
<h6>Union</h6>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="operation-bg">-</div>
|
||||
<h6>Substraction</h6>
|
||||
</div>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper hide">
|
||||
<div class="step-by-step">
|
||||
<h1>Step by step</h1>
|
||||
<div class="input-wrap">
|
||||
<h1 class="text">1.</h1>
|
||||
<div class="input"><input type="result" id="step1" readonly/></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- -----------------------------------JS---------------------------- -->
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
295
Lab-1/script.js
Normal file
295
Lab-1/script.js
Normal file
@ -0,0 +1,295 @@
|
||||
let maxNum = 26;
|
||||
let currNum = 2;
|
||||
|
||||
function AddSet() {
|
||||
|
||||
if (currNum < 26) {
|
||||
|
||||
let charNum = 65 + currNum;
|
||||
currNum++;
|
||||
|
||||
let delBtn = document.querySelectorAll('#delBtn');
|
||||
if (delBtn[delBtn.length - 1]) {
|
||||
delBtn[delBtn.length - 1].style = "display: none;";
|
||||
}
|
||||
|
||||
node = document.getElementById('sets');
|
||||
node.insertAdjacentHTML('beforeend', ` <div class="input-wrap">
|
||||
<h1 class="text">Set &#${charNum} = </h1>
|
||||
<div class="input"><input type="set" id="set${charNum}" placeholder="Define set"/></div>
|
||||
</div>`);
|
||||
|
||||
} else {
|
||||
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;";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let universalSet = new Set();
|
||||
|
||||
function Complement(set) {
|
||||
|
||||
let _complement = new Set();
|
||||
|
||||
_complement = Difference(universalSet, set);
|
||||
|
||||
return _complement;
|
||||
}
|
||||
|
||||
function Intersection(set1, set2) {
|
||||
|
||||
let _intersection = new Set();
|
||||
|
||||
set1.forEach(element => {
|
||||
if (set2.has(element)) {
|
||||
_intersection.add(element);
|
||||
}
|
||||
});
|
||||
|
||||
return _intersection;
|
||||
}
|
||||
|
||||
function Union(set1, set2) {
|
||||
|
||||
let _union = new Set(set1);
|
||||
|
||||
set2.forEach(element => {
|
||||
_union.add(element);
|
||||
});
|
||||
|
||||
return _union;
|
||||
}
|
||||
|
||||
function Difference(set1, set2) {
|
||||
|
||||
let _difference = new Set(set1);
|
||||
|
||||
set2.forEach(element => {
|
||||
|
||||
if (_difference.has(element)) {
|
||||
_difference.delete(element);
|
||||
}
|
||||
});
|
||||
|
||||
return _difference;
|
||||
}
|
||||
|
||||
|
||||
const OPERATORS = new Set(['~', '!', '∩', '/', '∪', '+', '-']);
|
||||
const BRACKETS = new Set(['(', ')']);
|
||||
|
||||
let SETSNAMES = new Set();
|
||||
let SETS = new Array();
|
||||
|
||||
function Evaluate() {
|
||||
|
||||
FetchSets();
|
||||
|
||||
let formulaString = document.getElementById('formula').value;
|
||||
|
||||
let charArray = formulaString.split('');
|
||||
let RPN_Array = ConvertFormulaCharArrayToRPN(charArray);
|
||||
|
||||
let result = SolveRPNFormula(RPN_Array);
|
||||
|
||||
let readableResult = ConvertToReadableResult(result);
|
||||
|
||||
|
||||
let resultField = document.getElementById('result');
|
||||
resultField.value = readableResult;
|
||||
|
||||
|
||||
SETSNAMES.clear();
|
||||
SETS = new Array();
|
||||
universalSet = new Set();
|
||||
}
|
||||
|
||||
function ConvertFormulaCharArrayToRPN(chars) {
|
||||
|
||||
let setsStack = new Array();
|
||||
let actionsStack = new Array();
|
||||
|
||||
chars.forEach(element => {
|
||||
|
||||
if (SETSNAMES.has(element)) {
|
||||
|
||||
setsStack.push(GetSetFromIndex(element));
|
||||
}
|
||||
|
||||
if (OPERATORS.has(element)) {
|
||||
|
||||
while (GetActionPriority(actionsStack[actionsStack.length - 1]) >= GetActionPriority(element)) {
|
||||
|
||||
let last = actionsStack.pop();
|
||||
|
||||
if (last != '(') {
|
||||
setsStack.push(last);
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (actionsStack[0] == undefined || GetActionPriority(actionsStack[actionsStack.length - 1]) < GetActionPriority(element)) {
|
||||
|
||||
actionsStack.push(element);
|
||||
}
|
||||
}
|
||||
|
||||
if (BRACKETS.has(element)) {
|
||||
|
||||
if (element == '(') {
|
||||
|
||||
actionsStack.push(element);
|
||||
}
|
||||
|
||||
if (element == ')') {
|
||||
|
||||
let last = actionsStack.pop();
|
||||
|
||||
while (last != '(') {
|
||||
|
||||
setsStack.push(last);
|
||||
last = actionsStack.pop();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
while (actionsStack[0] != undefined) {
|
||||
|
||||
setsStack.push(actionsStack.pop());
|
||||
}
|
||||
|
||||
return setsStack;
|
||||
}
|
||||
|
||||
function SolveRPNFormula(RPN_Array) {
|
||||
|
||||
let stack = new Array();
|
||||
|
||||
for (let i = 0; i < RPN_Array.length; i++) {
|
||||
const element = RPN_Array[i];
|
||||
|
||||
if (OPERATORS.has(element)) {
|
||||
|
||||
if (element == '~' || element == '!') {
|
||||
|
||||
let currSet = stack.pop();
|
||||
|
||||
let result = Complement(currSet);
|
||||
|
||||
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 {
|
||||
|
||||
stack.push(element);
|
||||
}
|
||||
}
|
||||
|
||||
return stack[0];
|
||||
}
|
||||
|
||||
|
||||
|
||||
function FetchSets() {
|
||||
|
||||
let universalArray = new Array();
|
||||
|
||||
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 {
|
||||
console.log('[WARNING] Some of the sets are not defined');
|
||||
}
|
||||
}
|
||||
|
||||
universalSet = new Set(universalArray);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function GetSetFromIndex(index) {
|
||||
|
||||
let unicode = index.charCodeAt(0);
|
||||
|
||||
let num = unicode - 65;
|
||||
|
||||
return SETS[num];
|
||||
}
|
||||
|
||||
function GetActionPriority(action) {
|
||||
|
||||
if (action == '~' || action == '!') {
|
||||
return 5;
|
||||
} else if (action == '∩' || action == '/') {
|
||||
return 4;
|
||||
} else if (action == '∪' || action == '+') {
|
||||
return 3;
|
||||
} else if (action == '-') {
|
||||
return 2;
|
||||
} else if (action == '(') {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
function ConvertToReadableResult(unconverted) {
|
||||
|
||||
let converted = Array.from(unconverted).sort().join(', ');
|
||||
return converted;
|
||||
}
|
||||
78
index.html
Normal file
78
index.html
Normal file
@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>CDM Utils</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar is-white">
|
||||
<div class="navbar-brand">
|
||||
<a href="index.html" class="navbar-item">
|
||||
<!-- <img class="mr-2 py-1" src="assets/cuqmbr.png" alt="Cucumber emoji image"> -->
|
||||
CDM Utils
|
||||
<!-- <img class="ml-2 py-1" src="assets/Shchoholev-logo.png" alt="Cucumber emoji image"> -->
|
||||
</a>
|
||||
|
||||
<a class="navbar-burger" id="burger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-menu" id="nav-links">
|
||||
<din class="navbar-start">
|
||||
<a href="index.html" class="navbar-item">
|
||||
Home
|
||||
</a>
|
||||
</din>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item has-dropdown is-hoverable" id='dropdown'>
|
||||
<a class="navbar-link">
|
||||
Introduction. Set Theory
|
||||
</a>
|
||||
|
||||
<div class="navbar-dropdown">
|
||||
<a href="pages/lab-1.html" class="navbar-item">
|
||||
Set Algebra
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="columns gapless my-0 has-background-info">
|
||||
<div class="column is-6-desktop is-12-tablet py-0">
|
||||
<section class="hero is-fullheight-with-navbar">
|
||||
<div class="hero-body">
|
||||
<div class="">
|
||||
<p class="title">
|
||||
<span class="icon-text has-text-white">
|
||||
<span>Hello there</span>
|
||||
<span class="icon">
|
||||
<i class="fas fa-handshake ml-5"></i>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="subtitle has-text-white">The web-site is created for people who want to learn<br> more about Computer Discrete Mathematics</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script src="js/index.js"></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
13
style.css
13
style.css
@ -171,13 +171,22 @@ body {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.set {
|
||||
=======
|
||||
.set,
|
||||
.value {
|
||||
>>>>>>> cdm-utils/set-algebra
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
#sets, #values {
|
||||
=======
|
||||
#sets {
|
||||
>>>>>>> cdm-utils/set-algebra
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -258,8 +267,12 @@ input[type=result] {
|
||||
font-family: Roboto;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.addSet,
|
||||
.addValue {
|
||||
=======
|
||||
.addSet {
|
||||
>>>>>>> cdm-utils/set-algebra
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user