calculator-app

Simple Calculator

This was one of the first assignments I created in my bootcamp. It was quite fun and challenging at first to build. I struggled for a while, but I managed to pull it all together by simplifying some of the more complicated logic (for example, limiting the calculator to single, non-chained computations).

Application Logic

The core of this calculator lives in calculator.js. Below is an overview of how it works so you (or future readers) can quickly understand the flow:

  1. State Variables
    • display – the DOM element that shows the current input/result.
    • operation – a string that accumulates all characters the user has typed (digits, operators, decimals, minus-sign, etc.). This is eventually evaluated by eval().
    • firstNumbers / secondNumbers – convenience strings holding the numbers on the left and right side of the current operator. They are used mainly for what is shown on-screen while typing.
    • Flag booleans that guide what input is allowed next:
      • operatorFLag – true once an operator has been entered and we’re now typing the second operand.
      • decimalFlag – guards against multiple decimals in the same number.
      • negativeFlag – tracks whether the first number started with a minus sign.
      • calculationFlag – becomes true right after pressing = so we know a new number should replace (not append to) the current result.
  2. Main Functions
    • showValue(input) – called by every button. It branches based on what was clicked:
      • Operators (+, -, x, /)
      • Digits (0-9)
      • Special cases: starting a negative number, preventing two operators in a row, chaining operations, etc.
    • addDecimal() – safely appends a . only if the current operand doesn’t already contain one.
    • calculate() – evaluates operation using eval() (after replacing x with *) and then resets flags so a fresh calculation can start.
    • deleteResult() – the “C” (clear) button. Resets everything including the flags and the display.
  3. Workflow Example
    1. User clicks 7 → showValue(7) appends to operation ("7") and updates display.
    2. User clicks + → showValue('+') sets operatorFLag = true, stores current operator, and updates operation ("7+").
    3. User clicks 3 → because operatorFLag is true, the digit goes into secondNumbers and display now shows 3.
    4. User clicks = → calculate() detects there was no x, so it simply does eval("7+3"), sets operation = "10", puts 10 on screen, and prepares for the next entry.
  4. Why so many flags? Building a calculator without a full parser is tricky. These booleans let us enforce rules such as:
    • Only one operator at a time unless you’re chaining operations (e.g., 3 + 2 + 4).
    • No more than one decimal point per operand.
    • Display resets vs. appends depending on whether the last action was =.
  5. Potential Improvements
    • Replace eval() with a small expression parser to avoid security concerns.
    • Add keyboard support via keydown events.
    • Simplify state management by merging firstNumbers/secondNumbers into an array or using a finite-state machine.

Feel free to tweak or extend this explanation as the project evolves! :)

Calculator path