Calculator Feedback

Here’s my project
More importantly, how is my code? First project with pure css and javascript. Is it easy to understand and a good solution?

Hey, looks nice. One thing I noticed: you can add unlimited dots. Another thing: 0.2*0.1 will give an error (Number to big).

1 Like

Thanks. I forgot to test with decimal.

BTW 70 lines, I am at 400 lines and not even completed.:frowning2:

Lol, whateva works. I made it simple by having the values as the ID of each button so I only had to have one event handler for the number buttons, and another for the operators instead of one for each.

In addition to what @BenGitter said, division like 1/3, where the result is periodic decimal, throws an error.

You can’t chain mathematical operations (third user story). The calculator only remembers last two operands.

And there is something wrong with styling.



1 Like

crap looks like this on my computer in chrome and edge

You can’t chain mathematical operations (third user story). The calculator only remembers last two operands.

I’m not sure what you mean?

Design works fine for me (Firefox).

In project description point 6.

Try adding e.g. 1 + 2 + 3. The result should be 6.

1 Like

Thanks. And just when I thought I had it done xD

1 Like

I’m on Ubuntu.

Tried in Chrome on my Android phone - same as on desktop.

In Chrome on my Windows tablet - design is ok.

It looks like fonts in Ubuntu version are placed a little higher. May be the custom fonts are the problem?

1 Like

That and maybe the way I arranged it with padding and such. I noticed having border-box sizing screwed it up too.

I always add this at the beginning of every CSS file:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;

It resets browser defaults.

1 Like

Yeah, and that screwed it up, so I should brobably use margins for layout instead of padding

Try it now, I think I fixed chaining, and I set border-sizing to content-box.

Looks nice on my screen. I like the colors and overall design of the calculator.

You didn’t take into account the order of operations. 1+2*3 is 7, not 9.

Edited to add. Perhaps you could fix the floating point error, too. Try 0.1-0.01 to see the problem.

1 Like

I’m not worried about order of operations since the FCC example project doesn’t use them. Thanks for the reminder about floats.

Found a way to correct layout - you should set:

.cal-body {
  width: 352px; /* 352px or bigger */

Found another bug:

if you divide two numbers (say 5 / 2) and then you try to do any operation with the result you get infinity (e.g. after 5 / 2 you have a result 2.5 showing, try to add something to it).

@IsaacAbrahamson I had a quick look at the functionality of your calculator (I’m working on one myself now) and I noticed the following issues:

  • When I push an operator the number gets switched for a zero. I think it should show you the number or the result of the operation.

  • It’s not possible to multiply with minus: Try -1 times 1 or vice versa or -1 times -1.

  • 6 - 0.3 gives NaN

I haven’t tested it extensively, so there could be more.

I think I fixed most of the errors, could you see if its working for you now?