Please critique my calculator

Please critique my calculator
0

#1

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


#2

functionality looks good


#3

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!


#4

@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?


#6

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 ^^


#7

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.


#8

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


#9

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.


#10

@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.


#11

1 / 7 will not work.


#12

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.


#13

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


#14

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.)


#15

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


#16

“3.000000057 - 3” will not work OVERFLOW


#17

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.)


#18

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


#19

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:


#20

More than one Null i can not input.


#21

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