react-calculator

A simple calculator web app built with React and styled using Rebass.

Libraries and Tools

• ES2018 syntax with BabelJS
• GatsbyJS powered by ReactJS
• Styled with Rebass, React primitive UI components built with styled-system
  • using Emotion and Theme UI.
• JestJS for unit testing
• Code formatting with Prettier
• State management with React hooks and context

Philosophy

At the beginning some decisions had to be made on the basic functioning of the calculator.

• It should have the 4 basic operations:

  • Division ÷
  • Multiplication ×
  • Addition +
  • Subtraction -

• It should use immediate execution logic formula/expression logic.

  • Immediate Execution Logic:

    3 + 5 × 6 - 2 ÷ 4 → (((3 + 5) * 6) - 2) / 4 = 11

  • Formula/Expression Logic:

    3 + 5 × 6 - 2 ÷ 4 → 3 + (5 * 6) - (2 / 4) = 32.5

• If and operator key is pressed after a value is computed, then the computed value should be continued.

  • Example:

    pressing 2 + 3 = + 4 = → 9 is equivalent to pressing 2 + 3 + 4 = → 9

Computing Values