Alright, this is for the reader who has the same issues which I had.
If you decided to use regex for testing, and store all values from buttons inside of array than you can continue reading this, otherwise see the answer from @honmanyau which is really useful
Array?
If you store all the values to array and every time user clicks the buttons will push it to array, than it’s not a bad idea to clean up from empty strings.
var arr = [];
$('.button').on('click', function() {
arr.push($(this).attr('value'));
arr = arr.filter(function(n) { return n != ""; });
});
And now every time you arr.splice() this code will handle all of the empty values. Console.log(arr) and you will see what I mean.
This is the kind of issues I had. The arr was something like [“1”, “2”, “7”, " ", " "] which will go way worst when you keep splicing it…
The RegExp
The regex is best, in my opinion, to actually not try to come up with something cool which will test everything at one time. It’s best by testing or matching piece by piece. Don’t come up with something like this for zeros, unless it worked for you /because for me didn’t))
Use something like this if you are matching zeros:
//zeros
if(arr.join('').match(/^0\d+/)){
arr.splice(-2, 1);
$('.result').text(arr.join(''));
} else if(arr.join('').match(/[^0-9\.]0\d+/)){
arr.splice(-2, 1);
$('.result').text(arr.join(''));
} else if(arr.join('').match(/\.0/)){
$('.result').text(arr.join(''));
}
I know there might be a shorter way, but it’s better to make it longer and make sure that will work 100%
Decimals
In my opinion it’s better to manipulate the dot(.) when user clicks on it and take out the value="" from your HTML:
$('.button-decimal').click(function(){
var lastNum = arr.join('').match(/\.\d+$/);
if(/[^0-9]$/.test(arr)){
$('.result').text(arr.join(''));
} else if(arr.length==0) {
arr.splice(0, 0, "0.");
$('.result').text(arr.join(''));
}else {
arr.splice(arr.length, 0, ".");
$('.result').text(arr.join(''));
}
if(lastNum.join('').split('').includes('.')){
arr.splice(-1, 1);
$('.result').text(arr.join(''));
}
});
Negative numbers
Alright, you will probably come up with something much better, but I made it really long)) I had the same idea as decimal. Take out the value="" from your HTML, because you will probably have another test to make sure that multiple operators like (±*/) don’t repeat and this going to be handy.
$('.button-negative').click(function(){
var lastNums = arr.join('').match(/\d+?\.?\d{1,}$/);
var minusLastNums = arr.join('').match(/-\d+?\.?\d{0,}$/); //-number
if(!moreThanOneOperators.test(arr)){
if(minusLastNums){
arr.splice(-minusLastNums.join('').split('').length, 1);
$('.result').text(arr.join(''));
}
if(arr.length==0){
arr.splice(0, 0, "-0");
$('.result').text(arr.join(''));
}else if(lastNums){
arr.splice(-lastNums.join('').split('').length, 0, '-');
$('.result').text(arr.join(''));
}else if(lastNums==null){
arr.splice(-1, 0, "-");
$('.result').text(arr.join(''));
}
}
});
And we end up with calculator without bugs = 99% . Why only 99%? Well trust me, bugs are still showing up for me at random cases)) But at least the big main problems are far away
(This is the image with positive 100 +negative (-0.5), but it doesn’t repeat the operators)) don’t worry )
You can check my Calculator- Codepen
Good Luck