StepSolve (live at stepsolve.us) is a step-by-step calculator, designed to provide an intuitive demonstration of the order of opoerations for arithmetic.
- Clone this repo and navigate to the root directory.
git clone https://github.com/rhofvendahl/zenscape-react
cd movie_finder_api
- Install dependencies.
yarn install
To serve locally:
yarn start
To run tests:
yarn test
To generate production build:
yarn build
Below I'll give a quick overview of StepSolve's logic & layout.
All evaluation logic is in src/solve.ts. The basic algorithm is as follows:
- The input expression is parsed into tokens representing numbers, operators and parentheses.
- Dashes representing negatives (rather than subtraction) are identified, and where possible "resolved" (combined with a following number, which is inverted).
- A single operation is performed on the token sequence as determined by order of operations, and any eligible negative signs are resolved. This operation returns a new token sequence as well as some meta-data on the operation performed.
- 3 is repeated until a single token remains, at which time the collected token sequences and meta-data are returned as a set of "step" objects.
It may be worth noting that this step-by-step approach represents an intentional sacrifice of simplicity & efficiency for human readable output.
A good entry point for StepSolve's UI is src/components/Solver.tsx, which describes the parent component of all other visible components.
Among these child components I'd recommend checking out "Step", which describes the logic necessary in creating the colored boxes around each "computedFrom" sequence (the part of an expression which contains the tokens about to be operated on) and the matching text color for each "computed" token (the number on the following line that results from that operation).
In developing this application I was met with a lot of unexpected gotchas, caveats and edge cases. To list a few:
- Dashes do different things when they signify "negative" versus "subtract", and it took a lot of whiteboarding and headscratching to generate a consistent set of rules for detecting, validating and applying the two operators.
- One fun one is that in cases like "-2^-3", the dash before 3 is resolved before exponentiation while the dash before 2 is resolved after.
- Another: when a "neg" sign is followed by an "(", it must be kept around until the parentheses resolve in order to be applied to the resulting number.
- This is pretty inconsequential, but the rules for which letters go at the end of "1st", "2nd", "3rd" etc. are weird.
- Most ordinals end in "th", unless the last digit is "1", "2", or "3", which have their own - unless the last two digits are "11", "12" or "13".
- For the sake of ease I just used "th" for all numbers with decimals, though I honestly couldn't say if this is correct.
All in all, StepSolve provided a great reminder of how hard it is to break down intuitive processes into machine-readable rules.