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

changes

Browse Source
This commit is contained in:
Shchoholiev 2021-11-08 14:15:06 +02:00
parent ef7e91c9c9
commit 85e68f1ffb
7 changed files with 0 additions and 1052 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
js/lab-1.js → Lab-1/lab-1.js
View File

15
js/index.js
View File

@ -1,15 +0,0 @@
const burgerIcon = document.querySelector('#burger');
const navbarMenu = document.querySelector('#nav-links');
burgerIcon.addEventListener('click', () => {
burgerIcon.classList.toggle('is-active');
navbarMenu.classList.toggle('is-active');
});
const dropDowns = document.querySelectorAll('#dropdown');
dropDowns.forEach(element => {
element.addEventListener('click', () => {
element.classList.toggle('is-active');
})
});

540
js/lab-2.js
View File

@ -1,540 +0,0 @@
let maxNumOfValues = 26;
let currNumOfValues = 2;
function AddValue() {
if (currNumOfValues < 26) {
let charNum = 65 + currNumOfValues;
currNumOfValues++;
let delBtn = document.querySelectorAll('#delBtn');
if (delBtn[delBtn.length - 1]) {
delBtn[delBtn.length - 1].style="display: none;";
}
node = document.getElementById('values');
node.insertAdjacentHTML('beforeend', ` <div class="field" id="valueField${charNum - 65}">
<div style="display: flex; align-items: center;">
<button class="delete is-small mr-1" type="button" onclick="DeleteValue(${charNum - 65})" id="delBtn"></button>
<label class="label">Value &#${charNum}</label>
</div>
<div class="control">
<input class="input" type="text" placeholder="e.g. 1 or 0" id="value${charNum - 65}">
</div>
</div>`);
} else {
console.log('You have reached a limint of available values');
}
}
function DeleteValue(valNum) {
let valueField = document.querySelector(`#valueField${valNum}`);
valueField.remove();
currNumOfValues--;
let delBtn = document.querySelectorAll('#delBtn');
if (delBtn[delBtn.length - 1]) {
delBtn[delBtn.length - 1].style="display: inline-block;";
}
}
let VALUES = new Set();
let userValues = new Array();
function FetchValues() {
userValues = new Array();
for (let i = 0; i < currNumOfValues; i++) {
let inputField = document.getElementById(`value${i}`);
let currCharStr = String.fromCharCode(65 + i);
if (inputField.value === '1' || inputField.value === 'true' || inputField.value === 'True'|| inputField.value === 'TRUE' || inputField.value === 't' || inputField.value === 'T') {
VALUES.add(currCharStr);
userValues.push([currCharStr, true]);
} else if (inputField.value === '0' || inputField.value === 'false' || inputField.value === 'False' || inputField.value === 'FALSE' || inputField.value === 'f' || inputField.value === 'F') {
VALUES.add(currCharStr);
userValues.push([currCharStr, false]);
}
}
for (const iterator in VALUES) {
console.log(iterator, VALUES[iterator]);
}
}
function Evaluate() {
FetchValues();
let formulaField = document.getElementById('formula');
let formulaChraArray = formulaField.value.split('');
let formulaRPNArray = ConvertCharArrayToRPNArray(formulaChraArray);
let formulaValuesRPNArray = ConvertLettersToValues(formulaRPNArray);
let result = SolveRPNFormula(formulaValuesRPNArray);
let readableResult = convertToReadableResult(result[0]);
let resultField = document.getElementById('result');
resultField.value = readableResult;
let stepsActionsArray = StepByStepRPNFormula(formulaRPNArray);
let stepsResultsArray = result[1];
for (let i = 0; i < stepsActionsArray.length; i++) {
const action = stepsActionsArray[i];
const result = stepsResultsArray[i];
console.log(action + ' = ' + result);
}
}
function Negation(value) {
if (value != undefined) { return !value; }
}
function Conjunction(firstValue, secondValue) {
if (firstValue === true && secondValue === true) {
return true;
} else if (firstValue === false && secondValue === true || firstValue === true && secondValue === false || firstValue === false && secondValue === false) {
return false;
}
}
function Disjunction(firstValue, secondValue) {
if (firstValue === true || secondValue === true) {
return true;
} else if (firstValue === false && secondValue === false) {
return false;
}
}
function Equivalence(firstValue, secondValue) {
if (firstValue === secondValue) {
return true;
} else if (firstValue !== secondValue) {
return false;
}
}
function ConvertCharArrayToRPNArray(chars) {
let _values_stack = new Array();
let _actions_stack = new Array();
for (let i = 0; i < chars.length; i++) {
const element = chars[i];
if (VALUES.has(element)) {
_values_stack.push(element);
} else if (OPERATORS.has(element)) {
while (GetActionPriority(_actions_stack[_actions_stack.length - 1]) >= GetActionPriority(element)) {
let last = _actions_stack.pop();
if (last != '(') {
_values_stack.push(last);
} else {
break;
}
}
if (_actions_stack[0] == undefined || GetActionPriority(_actions_stack[_actions_stack.length - 1]) < GetActionPriority(element)) {
_actions_stack.push(element);
}
} else if (BRACKETS.has(element)) {
if (element == '(') {
_actions_stack.push(element);
}
if (element == ')') {
let _last = _actions_stack.pop();
while (_last != '(') {
_values_stack.push(_last);
_last = _actions_stack.pop();
}
}
} else {
Error('The programm cant solve given formula. Do you typed everything right? Maybe you forgot to define some value?');
}
}
while (_actions_stack[0] != undefined) {
_values_stack.push(_actions_stack.pop());
}
return _values_stack;
}
function ConvertLettersToValues(RPNArray) {
let valuesRNPArray = new Array();
RPNArray.forEach(element => {
if (VALUES.has(element)) {
valuesRNPArray.push(GetValueFromIndex(element));
} else if (element !== '(' || element !== ')') {
valuesRNPArray.push(element);
}
});
return valuesRNPArray;
}
function SolveRPNFormula(valuesRPNArray) {
let stepByStepResults = new Array();
let _stack = new Array();
for (let i = 0; i < valuesRPNArray.length; i++) {
const element = valuesRPNArray[i];
if (OPERATORS.has(element)) {
if (element == '!') {
let _currValue = _stack.pop();
let _result = Negation(_currValue);
_stack.push(_result);
stepByStepResults.push(convertToReadableResult(_result));
} else if (element == '*') {
let _secondValue = _stack.pop();
let _firstValue = _stack.pop();
let _result = Conjunction(_firstValue, _secondValue);
_stack.push(_result);
stepByStepResults.push(convertToReadableResult(_result));
} else if (element == '+') {
let _secondValue = _stack.pop();
let _firstValue = _stack.pop();
let _result = Disjunction(_firstValue, _secondValue);
_stack.push(_result);
stepByStepResults.push(convertToReadableResult(_result));
} else if (element == '>') {
let _secondValue = _stack.pop();
let _firstValue = _stack.pop();
let _result = Disjunction(Negation(_firstValue), _secondValue);
_stack.push(_result);
stepByStepResults.push(convertToReadableResult(_result));
} else if (element == '=') {
let _secondValue = _stack.pop();
let _firstValue = _stack.pop();
let _result = Equivalence(_firstValue, _secondValue);
_stack.push(_result);
stepByStepResults.push(convertToReadableResult(_result));
}
} else {
_stack.push(element);
}
}
return [_stack[0], stepByStepResults];
}
function StepByStepRPNFormula(RPNArray) {
let stepsArray = new Array();
let _stack = new Array();
for (let i = 0; i < RPNArray.length; i++) {
const element = RPNArray[i];
if (OPERATORS.has(element)) {
if (element == '!') {
let _currValue = _stack.pop();
let _result;
if (_currValue.length <= 2) {
_result = '!'.concat(_currValue);
} else {
_result = '!'.concat('(').concat(_currValue).concat(')');
}
_stack.push(_result);
stepsArray.push([_result]);
} else if (element == '*') {
let _secondValue = _stack.pop();
let _firstValue = _stack.pop();
let _result;
if (_firstValue.length <= 2 && _secondValue.length <= 2) {
_result = _firstValue.concat('*').concat(_secondValue);
} else if (_firstValue.length <= 2 && _secondValue.length > 2) {
if (Boolean(_secondValue.split('').filter(x => x === '!').length)) {
_result = _firstValue.concat('*').concat(_secondValue);
} else {
_result = _firstValue.concat('*').concat('(').concat(_secondValue).concat(')');
}
} else if (_firstValue.length > 2 && _secondValue.length <= 2) {
if (Boolean(_firstValue.split('').filter(x => x === '!').length)) {
_result = _firstValue.concat('*').concat(_secondValue);
} else {
_result = '('.concat(_firstValue).concat(')').concat('*').concat(_secondValue);
}
} else if (_firstValue.length > 2 && _secondValue.length > 2) {
if (Boolean(_firstValue.split('').filter(x => x === '!').length) && Boolean(_secondValue.split('').filter(x => x === '!').length)) {
_result = _firstValue.concat('*').concat(_secondValue);
} if (Boolean(_firstValue.split('').filter(x => x === '!').length) && !Boolean(_secondValue.split('').filter(x => x === '!').length)) {
_result = _firstValue.concat('*').concat('(').concat(_secondValue).concat(')');
} else if (!Boolean(_firstValue.split('').filter(x => x === '!').length) && Boolean(_secondValue.split('').filter(x => x === '!').length)) {
_result = '('.concat(_firstValue).concat(')').concat('*').concat(_secondValue);;
} else {
_result = '('.concat(_firstValue).concat(')').concat('*').concat('(').concat(_secondValue).concat(')');
}
}
_stack.push(_result);
stepsArray.push([_result]);
} else if (element == '+') {
let _secondValue = _stack.pop();
let _firstValue = _stack.pop();
let _result = _firstValue.concat('+').concat(_secondValue);
_stack.push(_result);
stepsArray.push([_result]);
} else if (element == '>') {
let _secondValue = _stack.pop();
let _firstValue = _stack.pop();
let _result = _firstValue.concat('>').concat(_secondValue);
_stack.push(_result);
stepsArray.push([_result]);
} else if (element == '=') {
let _secondValue = _stack.pop();
let _firstValue = _stack.pop();
let _result = _firstValue.concat('=').concat(_secondValue);
_stack.push(_result);
stepsArray.push([_result]);
}
} else {
_stack.push(element);
}
}
return stepsArray;
// return _stack[0];
}
function InputFormulaFotTruthTable() {
ClearTruthTableData();
console.log('\n',
'Write a formula you want to build a truth table for. Examples: (!a>b)+c*d=e',
'\n'
);
let _formulaString = prompt('>>> ');
if (_formulaString.search('[!,*,+,>,=]') == -1) {
Error('The programm cant solve given formula. Do you typed everything right?');
}
if (_formulaString.match(/[a-z]/g) != null) {
_formulaString.match(/[a-z]/g).forEach (element => {
TTVALUESNAMES.add(element);
})
} else {
Error('The programm cant solve given formula. Do you typed everything right?');
}
TTVALUESNAMES.forEach(element => {
TTVALUESCONTENTS.push([element]);
})
let _numColumns = TTVALUESNAMES.size;
let _numRows = Math.pow(2, _numColumns);
let _rowsContent = new Array();
for (let r = 0; r < _numRows; r++) {
_rowsContent.push(new Array());
for (let c = 0; c < _numColumns; c++) {
_rowsContent[r].push(false);
}
}
for (let c = 0; c < _numColumns; c++) {
let _period = Math.pow(2, _numColumns) / Math.pow(2, c+1);
let _zeros = true;
for (let r = 0; r < _numRows; r++) {
if (_zeros) {
_rowsContent[r][c] = false;
TTVALUESCONTENTS[c].push(false);
}
if (!_zeros) {
_rowsContent[r][c] = true;
TTVALUESCONTENTS[c].push(true);
}
if ((r + 1) % _period == 0) {
_zeros = !_zeros;
}
}
}
// console.log(_rowsContent);
// console.log(TTVALUESCONTENTS);
let _formulaCharArray = ConvertFormulaToCharArray(_formulaString);
let _result = new Array();
for (let i = 0; i < _numRows; i++) {
let _formula_RPN_Array = ConvertCharArrayToRPNArray(_formulaCharArray, i + 1);
_result.push(SolveRPNFormula(_formula_RPN_Array));
}
// console.log(_result);
_result.forEach(element => {
if (element == undefined) {
Error('The programm cant solve given formula. Do you typed everything right?');
}
});
ttformula = _formulaString;
numRows = _numRows;
rowsContent = _rowsContent;
truthTable = _result;
console.log('');
for (let r = 0; r < _numRows; r++) {
console.log(` ${_rowsContent[r].join(', ')} : ${_result[r]}`);
}
console.log('');
ClearTruthTableData();
ReturnToMenu();
}
const OPERATORS = new Set(['!', '*', '+', '>', '=']);
const BRACKETS = new Set(['(', ')']);
function GetActionPriority(action) {
if (action == '!') {
return 5;
} else if (action == '*') {
return 4;
} else if (action == '+' || action == '>' || action == '=') {
return 3;
} else if (action == '(') {
return 2;
} else {
return 0;
}
}
function GetValueFromIndex(valueIndex) {
for (let i = 0; i < userValues.length; i++) {
const element = userValues[i];
if (element[0] == valueIndex) {
return element[1];
}
}
}
function convertToReadableResult(unconverted) {
return unconverted === true ? '1' : '0';
}
function Error(errMsg) {
console.log(` [ERROR] ${errMsg}`);
}

95
js/lab-3.js
View File

@ -1,95 +0,0 @@
function GeneratePermutations() {
let permCount = document.querySelector('#permCount');
let permBtn = document.querySelector('#permBtn');
let permProgress = document.querySelector('#permProgress');
let permGenTime = document.querySelector('#permGenTime');
let permGenTimeHolder = document.querySelector('#permGenTimeHolder');
console.clear();
let cycle = 1;
let _elCount = permCount.value;
let a = new Array();
for (let i = 1; i <= _elCount; i++) {
a.push(i);
}
permBtn.style = "display: none;";
permProgress.style = "display: flex;";
permGenTimeHolder.style = "display: none";
date = new Date();
let _startTime = date.getTime();
heapPermutation(a, a.length, a.length);
date = new Date();
let _endTime = date.getTime();
permBtn.style = "display: inline-flex;";
permProgress.style = "display: none;";
permGenTimeHolder.style = "display: flex";
let _timeElapsed = _endTime - _startTime;
permGenTime.innerHTML = `${_timeElapsed} milliseconds elapsed`;
// JavaScript program to print all permutations using
// Heap's algorithm
// Prints the array
function printArr(a, c) {
console.log(a, c);
}
// Generating permutation using Heap Algorithm
function heapPermutation(a,size,n) {
// if size becomes 1 then prints the obtained
// permutation
if (size == 1) {
printArr(a, cycle);
cycle++;
}
for (let i = 0; i < size; i++) {
heapPermutation(a, size - 1, n);
// if size is odd, swap 0th i.e (first) and
// (size-1)th i.e (last) element
if (size % 2 == 1) {
let temp = a[0];
a[0] = a[size - 1];
a[size - 1] = temp;
}
// If size is even, swap ith
// and (size-1)th i.e last element
else {
let temp = a[i];
a[i] = a[size - 1];
a[size - 1] = temp;
}
}
}
}
function factorial(n) {
let fact = 1;
for (let i = 1; i <= n; i++) {
fact *= i;
}
return fact;
}

133
pages/lab-1.html
View File

@ -1,133 +0,0 @@
<!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="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<script src="../js/lab-1.js"></script>
</head>
<body>
<nav class="navbar is-white">
<div class="navbar-brand">
<a href="../insdex.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="lab-1.html" class="navbar-item">
Set Algebra
</a>
</div>
</div>
</div>
</div>
</nav>
<script src="../js/index.js"></script>
<div class="columns gapless my-0 has-background-success is-multiline">
<div class="column is-6-desktop is-12-tablet py-0">
<section class="hero is-fullheight-with-navbar">
<div class="hero-body">
<div class="container">
<p class="title has-text-white">Set Operations</p>
<p class="subtitle has-text-white">Simple implementation of different set operations, such as: Complement, Union, Intersection and Difference</p>
</div>
</div>
</section>
</div>
<div class="column is-6-desktop is-12-tablet">
<div class="container">
<section class="hero is-fullheight-with-navbar">
<div class="hero-body">
<div class="container">
<form class="box">
<div class="has-text-centered">
<input type="button" class="button is-info" value="Add new Set" onclick="AddSet();">
</div>
<div class="pb-3" id="sets">
<div class="field">
<label class="label">Set A</label>
<div class="control">
<input class="input" type="text" placeholder="e.g. 1,2,5" id="set0">
</div>
</div>
<div class="field">
<label class="label">Set B</label>
<div class="control">
<input class="input" type="text" placeholder="e.g. 5,6,7" id="set1">
</div>
</div>
</div>
<div class="field">
<label class="label">Formula</label>
<div class="control">
<input class="input" type="text" placeholder="e.g. (A+!B)/C" id="formula">
</div>
</div>
<div class="has-text-centered">
<input type="button" class="button is-info" value="Evaluate" onclick="Evaluate();">
</div>
<div class="field">
<label class="label">Result</label>
<div class="control">
<input class="input" type="text" placeholder="" readonly id="result">
</div>
</div>
</form>
</div>
</div>
</section>
</div>
</div>
</div>
<!--<div class="columns gapless my-0 py-5 has-background-success is-mobile">
<div class="column is-3-desktop is-2-tablet is-1-mobile"></div>
<div class="column is-6-desktop is-8-tablet is-10-mobile">
</div>
<div class="column is-3-desktop is-2-tablet is-1-mobile"></div>
</div>-->
</body>
</html>

121
pages/lab-2.html
View File

@ -1,121 +0,0 @@
<!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="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<script src="../js/lab-2.js"></script>
</head>
<body>
<nav class="navbar is-white">
<div class="navbar-brand">
<a href="../insdex.html" class="navbar-item">
CDM Utils
</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="lab-1.html" class="navbar-item">
Set Algebra
</a>
</div>
</div>
</div>
</div>
</nav>
<script src="../js/index.js"></script>
<div class="columns gapless my-0 has-background-success is-multiline">
<div class="column is-6-desktop is-12-tablet py-0">
<section class="hero is-fullheight-with-navbar">
<div class="hero-body">
<div class="container">
<p class="title has-text-white">Boolean Algebra</p>
<p class="subtitle has-text-white">Simple implementation of different Boolean Algebra<br> operations, such as: Conjunction, Disjunction, Negation,<br> Implication and Equivalence</p>
</div>
</div>
</section>
</div>
<div class="column is-6-desktop is-12-tablet">
<div class="container">
<section class="hero is-fullheight-with-navbar">
<div class="hero-body">
<div class="container">
<form class="box">
<div class="has-text-centered">
<input type="button" class="button is-info" value="Add new Value" onclick="AddValue();">
</div>
<div class="pb-3" id="values">
<div class="field">
<label class="label">Value A</label>
<div class="control">
<input class="input" type="text" placeholder="e.g. 1" id="value0">
</div>
</div>
<div class="field">
<label class="label">Value B</label>
<div class="control">
<input class="input" type="text" placeholder="e.g. 0" id="value1">
</div>
</div>
</div>
<div class="field">
<label class="label">Formula</label>
<div class="control">
<input class="input" type="text" placeholder="e.g. !A>(B+C)*A=C" id="formula">
</div>
</div>
<div class="has-text-centered">
<input type="button" class="button is-info" value="Evaluate" onclick="Evaluate();">
</div>
<div class="field">
<label class="label">Result</label>
<div class="control">
<input class="input" type="text" placeholder="" readonly id="result">
</div>
</div>
</form>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>

148
pages/lab-3.html
View File

@ -1,148 +0,0 @@
<!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="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<script src="../js/lab-3.js"></script>
<style>
.center {
display: flex;
align-items: center;
justify-content: center;
}
</style>
</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="lab-1.html" class="navbar-item">
Set Algebra (Lab 1)
</a>
</div>
</div>
</div>
</div>
</nav>
<script src="../js/index.js"></script>
<div class="columns gapless my-0 has-background-success">
<div class="column is-8-desktop is-12-tablet py-0">
<section class="hero is-fullheight-with-navbar">
<div class="hero-body">
<div class="container">
<p class="title has-text-white">Lab 3 - Generating permutations and combinations</p>
<p class="subtitle has-text-white">Simple implementation of algorithms for generating permutations and combinations of some set. A built in timer included in order to make your research much more pleasent and faster</p>
</div>
</div>
</section>
</div>
</div>
<div class="columns gapless my-0 has-background-success is-multiline is-mobile">
<div class="column is-1"></div>
<div class="column mb-2 is-4-desktop is-10-tablet is-10-mobile">
<div class="container">
<form class="box">
<div class="has-text-centered mb-2">
<label class="title is-4">Permutations Generator</label>
</div>
<div class="pb-3" id="sets">
<div class="field">
<label class="label">Number of elements in set</label>
<div class="control">
<input class="input" type="text" placeholder="e.g. 5" id="permCount">
</div>
</div>
</div>
<div class="has-text-centered">
<input type="button" class="button is-info" value="Generate" onclick="GeneratePermutations()" id="permBtn">
<progress class="progress is-small is-info" id="permProgress" style="display: none;"></progress>
</div>
<div class="has-text-centered mt-3" id="permGenTimeHolder" style="display: none;">
<p id="permGenTime" style="margin: auto;">Time elapsed: 125623 milliseconds</p>
</div>
</form>
</div>
</div>
<div class="column is-1"></div>
<div class="column is-1"></div>
<div class="column mt-2 is-4-desktop is-10-tablet is-10-mobile">
<div class="container">
<form class="box">
<div class="has-text-centered mb-2">
<label class="title is-4">Combinations Generator</label>
</div>
<div class="pb-3" id="sets">
<div class="field">
<label class="label">Number of elements in set</label>
<div class="control">
<input class="input" type="text" placeholder="e.g. 5" id="permCount">
</div>
</div>
</div>
<div class="has-text-centered">
<input type="button" class="button is-info" value="Generate" onclick="GeneratePermutations()" id="permBtn">
<progress class="progress is-small is-info" id="permProgress" style="display: none;"></progress>
</div>
<div class="has-text-centered mt-3" id="permGenTimeHolder" style="display: none;">
<p id="permGenTime" style="margin: auto;">Time elapsed: 125623 milliseconds</p>
</div>
</form>
</div>
</div>
<div class="column is-1"></div>
</div>
</body>
</html>