<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.container {
position: relative;
width: 700px;
height: max-content;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.wrap {
position: relative;
width: max-content;
height: max-content;
top: 50%;
transform: translateY(-50%);
}
.msg {
position: absolute;
left: 3px;
top: 32px;
font-size: 12px;
width: 200px;
height: 15px;
margin-top: 5px;
text-align: left;
}
.exp {
position: relative;
height: 30px;
width: 600px;
line-height: 30px;
font-size: 28px;
text-align: center;
border-radius: 5px;
border: 1px solid #bbb;
outline: none;
}
.exp:focus {
border: 1px solid #66aaff;
box-shadow: 0 0 3px #4488ff;
}
.submit {
margin-top: 10px;
height: 30px;
width: 200px;
border-radius: 5px;
border: 1px solid #bbb;
outline: none;
}
.submit:focus {
border: 1px solid #4488ff;
box-shadow: 0 0 3px #4488ff;
outline: none;
}
.submit:hover {
background: #66aaff;
border: 1px solid #4488ff;
outline: none;
cursor: pointer;
}
.good {
box-shadow: 0 0 3px #66cc66;
border: 1px solid #44aa44;
outline: none;
}
.exp.good {
background: #88ff88;
}
.submit.good:hover {
background: #88ff88;
outline: none;
}
.good:focus {
box-shadow: 0 0 3px #66cc66;
border: 1px solid #44aa44;
}
/* */
.bad {
box-shadow: 0 0 3px #ff0000;
border: 1px solid red;
}
.exp.bad {
background: #ffaaaa;
}
.submit.bad:hover {
background: #ffaaaa;
outline: none;
}
.bad:focus {
box-shadow: 0 0 3px #ff0000;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="wrap">
<input type="text" class="exp" placeholder="Type your expression here"><br>
<button class="submit">Check expression</button>
<div class="msg"></div>
</div>
</div>
<script>
let btn = document.querySelector('.submit');
let input = document.querySelector('.exp');
let msg = document.querySelector('.msg');
// /^[0-1+a-z+\~+\^+\=+\<+\>+\(+\)+\s+]+$/ig
let allowedChars = /^[0-1a-z\~\(]+[0-1a-z\~\^\=\<\>\(\)\s]+[0-1a-z\)]+$/ig;
let string;
var item = '';
var items = [];
var bracketStartIndex = [];
var bracketEndIndex = [];
var bracketBuffor = 0;
var nestLevel = 0;
var nesting = [];
function getInput() {
let check = input.value;
return check;
}
function getItems() {
items = [];
nestedBrackets = [];
for (let i = 0; i < string.length; i++) {
var unchangedString = string;
var changedString = string.split('');
changedString = changedString.filter(function(str) {
return /\S/.test(str);
});
}
for (let i = 0; i < changedString.length; i++) {
if (changedString[i] == '(') {
bracketBuffor++;
bracketStartIndex.push(i);
}
if (changedString[i] == ')') {
nesting.push(bracketBuffor);
bracketBuffor--;
bracketEndIndex.push(i);
}
if (bracketBuffor > nestLevel) {
nestLevel = bracketBuffor;
console.log('nesting up');
} else {
console.log('maximum nest level');
nestLevel--;
}
/*if (bracketBuffor > 1) {
nestedItem += changedString[i];
}
if (bracketBuffor != 0) {
item += changedString[i];
if (changedString[i] == ')') {
// item += changedString[i];
bracketBuffor--;
if (bracketBuffor == 0) {
items.push(item);
item = '';
} else {
items.push(nestedItem);
nestedBrackets.push(nestedItem);
//nestedItem = '';
}
}
}
*/
console.log(bracketBuffor);
}
console.log(nesting);
console.log(bracketStartIndex);
console.log(bracketEndIndex);
console.log(nestLevel);
//console.log(changedString);
//console.log(items);
}
function validate(str) {
if (str.match(allowedChars)) {
string = getInput();
if (input.classList.contains('bad')) {
input.classList.remove('bad');
btn.classList.remove('bad');
}
input.classList.add('good');
btn.classList.add('good');
msg.innerHTML = 'Your expression is correct!';
msg.style.color = 'green';
getItems();
} else {
if (input.classList.contains('good')) {
input.classList.remove('good');
btn.classList.remove('good');
}
input.classList.add('bad');
btn.classList.add('bad');
msg.innerHTML = 'Your expression is not correct!';
msg.style.color = 'red';
}
}
btn.addEventListener('mouseup', function() {
validate(getInput());
});
</script>
</body>
</html>
