Project Feedback - Braun Calculator

https://c-ehrlich.github.io/calculator/

Hi, I would love some feedback on this project. I wanted to create a tribute to the iconic Braun calculators, so after passing the basic FCC requirements I focused on implementing the features (and limitations!) of an old physical calculator.

I spent a lot of time on trying to find all edge cases in both regular and scientific mode, so if anyone can point out a sequence of inputs that doesn’t behave as expected I would be very grateful.

Thanks and happy holidays!

1 Like

Hi, cehrlich. What incredible amount of effort you put into this amazing project! Some feedback I’d suggest is that the calculator overflows when I use my mobile. Also, on desktop, It would be nice to know what does each button do on hover since some people (like me) may be not familiar with calculators’ functionality or can’t actually be able to recognize the button due to disabilities. I think that adding a title attribute to each button with the name of the button would help. For example: title=“Square root” for the inputSqrt button.

Wow, this looks really nice.

I think the horizontal scroll bar on narrow view ports is acceptable here since you are trying to precisely recreate the calculator.

Some of the buttons don’t have text associated with them so a screen reader user will not know what their function is. You can solve this by adding text inside the <button> to describe what it does and then visually hide the text so it doesn’t show up on the page. The same goes for the sci/reg switch.

Speaking of that switch, I’m not seeing a focus indicator when I Tab to it with the keyboard. Kitty Giraudel has an excellent article on making accessible toggles and she uses the same markup you are using.

On the info pop-up, rewrite the “click here” link.

Speaking of that pop-up, it is giving the appearance of a modal dialog but not acting like one. It should trap the keyboard focus so that it is not possible to Tab outside of it, such as to the calculator buttons underneath it. Modal dialogs are unfortunately hard to do correctly. Yet again Kitty has a good article on creating accessible dialogs.

But again, just want to say that this looks very nice.

1 Like

I had actually already used Kitty’s code as reference to create my toggle. The problem is that 1px dotted #212121 is basically invisible against the background of my calculator, which I hadn’t noticed because I tested in Chrome and Safari (which apparently both prefer to use the webkit defaults focus element?) but not Firefox. Once again an important reminder to always test in all major browsers.

Just skimmed this page, will probably try to implement the focus trapping but more than that it seems to be an incentive to just modify other people’s components instead that are already thoroughly tested for accessibility than to try building my own where possible.

Other stuff is already implemented. Thanks again!

Hi @cehrlich,

I think I don’t understand how the calculator works. What is the difference betweenSCI and REG?

Also, I have tried some inputs but I get ERR[0]:

Browser:

Version 92.0.4515.159 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit)

input:
-1 - -1 =

mode: REG

expected result:
0

project braun calculator:
ERR


input:
-1 - -1 =

mode: SCI

expected result:
0

project braun calculator:
ERR


input:
1 - -1=

mode: REG

expected result:
2

project braun calculator:
ERR


Cheers and happy coding :slight_smile:

Notes:

[0] I recorded a video:

Thanks for pointing this out! These were all the same bug - javascript eval() doesn’t know what to do with 1--1. I fixed it by running replace(/-\s*-\s*(\d+)/g, "-(-$1)") on the string before sending it to eval.
I’ve also added a note on REG vs SCI to the info modal. REG mode evaluates in input order, SCI evaluates in formula order, ie 1+2*3 is 9 in REG more, 7 in SCI mode.

1 Like