Please critique my calculator

http://www.braincells.com/webdev/calculator/

functionality looks good

1 Like

looks great! i’m digging the layout. as someone who runs noscript, i liked the “please enable javascript” bit. nice touch.

as for UX, one thing i noticed right away was after doing a calculation, i couldn’t hit an operator to use the solution in an operation. rather it deleted the solution and displayed ‘0’.

for me personally and the way i use calculators (usually for budgeting my monthly income and i like to see how much i start with and what i’m left with after each deduction), not having this function is a deal breaker.

just my two cents :slight_smile:

keep up the good work!

1 Like

@montycantsin Thanks.

I swore I would avoid “featureitis” (I had ideas to implement parentheses, arbitrary roots and exponents, hexadecimal conversions etc.) but your suggestion seemed like a good one and easy to implement so I went ahead and did it. Try it again and see if you like it.

I also noticed I was handling errors (e.g. division by zero) wrong so I fixed that too.

@iceveda06 Thanks.

Any comments about the look and feel?

yeah, it feels much better now for sure. every calculator i’ve used since i was a kid could do it so it just felt super wrong to not be able to do operations on the current result. figured it should be an easy feature to add ^^

1 Like

It looks nice. Good job. But me being the nitpicking a-hole that always tries to find something wrong…

It will allow me to enter “1+.1.” Those two decimal places in the same number don’t make sense. You seem to test for that since it won’t let me do another, but it should also check for a leading decimal point.

Also, you need to handle large numbers. Right now it just scrolls off the screen and I don’t know what happens.

When I hit an operation, before I type in a second operand, it shows “0”. This seems unusual to me. I’m used to calculators leaving up the previous operand until I start typing a new one. Or at least blank But “0” is offputting.

When I do chained multiplication - “2X2X2” - the second multiplication operator is different. Now, this different operator seems to have something to do with your exponent function, but it is hard to get to. I can get to it by “1+1=”. That gives me “2” of course. If I take that result and add “XX3” I get “8”, which I would expect from an exponent function. But I can’t get to it from typing “2XX2=” on a blank input.

But it looks really good. The calculator is such a tough project. It seems so simple and straight forward, but there are some many little things to consider.

1 Like

Actually, after I’ve hit equals I see that it allows me to do multiple operators, not just for the times symbol.

Maybe try to make it like a real calculator look? take a look at some images of calculators on google and see if you can come close to it.

1 Like

@ksjazzguitar

It looks nice. Good job. But me being the nitpicking a-hole that always tries to find something wrong…

Oh no this is great. Just what I wanted.

It will allow me to enter “1+.1.” Those two decimal places in the same number don’t make sense. You seem to test for that since it won’t let me do another, but it should also check for a leading decimal point.

This was due to a missing case in one of the switches in my state machine. Fixed.

Also, you need to handle large numbers. Right now it just scrolls off the screen and I don’t know what happens.

This is probably less than ideal but if the length of the answer including decimal point is greater than 13 (the maximum number of digits I can fit on the screen) I will just throw up my hands and display “OVERFLOW”. Hey what am I Hewlett-Packard? This is a cheap calculator… :smile:

If anyone has better (simple!) suggestions for doing it differently I’d be interested to know about it.

When I hit an operation, before I type in a second operand, it shows “0”. This seems unusual to me. I’m used to calculators leaving up the previous operand until I start typing a new one. Or at least blank But “0” is offputting.

Ok. I think I have that fixed now. Also that reminds me I have been using operand when I mean operator. Fixed that too.

When I do chained multiplication - “2X2X2” - the second multiplication operator is different. Now, this different operator seems to have something to do with your exponent function, but it is hard to get to. I can get to it by “1+1=”. That gives me “2” of course. If I take that result and add “XX3” I get “8”, which I would expect from an exponent function. But I can’t get to it from typing “2XX2=” on a blank input.

I never implemented exponents in the end so being able to type an operator twice is a bug in my state machine. I think it is fixed now.

The operator looking different the second time is a bug too but it took me a while to figure what it was. The problem is that for actual JavaScript math you want to use e.g. ‘*’ and ‘/’ as operators. However for display you want the nicer looking symbols provided by most fonts. Even for ‘+’ and ‘-’. So while displaying, I replace all these with HTML entities eg. ‘÷’, ‘×’, ‘+’, and ‘−’ with String.replace(); However this function has a quirk that if you use a string to describe the text to be replaced, it only gets replaced 1 time. To replace every instance you need to use a regular expression with the g flag. When I fixed that, the bug you describe went away.

But it looks really good. The calculator is such a tough project. It seems so simple and straight forward, but there are some many little things to consider.

Yep. This and the other advanced projects really need unit tests. I am pleased to see the beta versions include them. At this point I don’t have time to learn about JavaScript unit testing but it is certainly on my to do list.

@iceveda06

Maybe try to make it like a real calculator look? take a look at some images of calculators on google and see if you can come close to it.

I want to do this but I’m afraid it is beyond my meager design skills at the moment. After I finish the front-end certificate I’m going to do a second pass on all my projects and I’ll try and do this then.

1 / 7 will not work.

1 Like

Hey Thanks for catching this. In fact any irrational number will not work because I limit the output to 13 digits including the decimal point and give an overflow error if the string is longer.

So I have amended the code to check if the result is not an integer. If so I use the Number objects toPrecision() method to limit the result to 10 places.

It turn out that’s not enough. E.g. 6.2 / 2 becomes 3.1000000000. It’s technically correct but unsightly. So to get rid of the trailing zeros, I used parseFloat() to turn it back into a number and then called toString on it. Like this:

            if (result === Math.floor(result) )) { // is it an integer?
                my.answer = result.toString();
            } else {
                my.answer = parseFloat(result.toPrecision(10)).toString();
            }

Try it and let me know if you find any other bugs.

The Calculator works fine. Can you add a “1/x” Button – thanks.

Once again I should remind that this is a very cheap calculator :grinning: But you gave me a challenge I couldn’t resist so I have added that button. However to keep the design looking right I had to add four more buttons. I took advantage of that to add percent, change sign, and parentheses as well. (Parentheses actually don’t work at the moment. I have to add some extra states to my state machine and I’m too tired to get it right. So tomorrow maybe.)

Now parentheses work too. I also revamped the entire logic to be more efficient and concise.

“3.000000057 - 3” will not work OVERFLOW

Oops. Looks like I forgot to upload the latest version of the code. Try it now. It should give you the answer in exponential form. (Unfortunately it doesn’t accept input that way.)

It works fine. 2+(3+5) = 16. The answer is correct - but with “)” i see not 8 - i see 0. … a litle Display Problem.

Sorry it took such a long time to respond. Along the way I also refactored the code and updated the CSS. But take a look, it should display the intermediate calculations properly now.

For anyone reading this who doesn’t want to scroll all the way to the top of this thread. Here is a link to my calculator. Take a look. I think it’s pretty awesome! :wink:

More than one Null i can not input.

More than one null? Can you clarify what you mean?