I’ve been feeling a bit rusty lately, so I’d like to start making a little project and posting it here every day. Today’s thing is a simple calculator!

You can play with the code here.

I originally put this together in basic JavaScript, which I found quite pleasant to write, but quite ugly to look at later, so I remade it in React. The core of the design is a simple state machine: the calculator is either collecting its first (or left) input, awaiting its second (right) input after an operator is pressed, collecting its right input, or displaying the result (which is stored in ‘left’) after pressing ‘=’.

Left and right are stored as numbers rather than strings, but that might be complicating the code more than necessary. Pushing a new number to a string doesn’t require place value management, and it would definitely simplify implementing decimal numbers.

I spent about 30 minutes troubleshooting a problem that I’m gonna blame on React. Functions can’t be stored in state using the syntax setFunction(f); you have to use setFunction(() => f). Which is dumb.