Basic Arithmetic Operations

Relevant source files

The following files were used as context for generating this wiki page:

• calculator.html
• README.md
• .github/workflows/static.yml
• LICENSE
• index.html (Aliased to main application entry point)

Basic Arithmetic Operations constitute the core functional logic of the Calculator application. This system manages user input for numerical values and operators, processes calculations through a centralized computation engine, and maintains a stateful representation of the current expression and result. The application supports standard operations including addition, subtraction, multiplication, and division, along with utility functions like percentage and sign toggling.

Sources: calculator.html:410-470

Core Logic and State Management

The arithmetic system relies on a set of global state variables that track the progression of a calculation. This ensures that multi-step operations (e.g., chain calculations) are handled predictably.

State Variable	Type	Description
current	String	The value currently being typed or the result of the last operation.
previous	String	The operand stored when an operator is selected.
operator	String/Null	The active arithmetic operator (+, −, ×, ÷).
shouldReset	Boolean	Flag indicating if the next digit input should clear the current display (e.g., after an operator is pressed).

Sources: calculator.html:412-416

Input Handling Flow

When a user interacts with the calculator, the application distinguishes between digits, decimals, and operators. The following diagram illustrates the flow of a digit input:

Arithmetic Computation Engine

The compute function serves as the central processing unit for all arithmetic. It takes two numerical operands and an operator string, returning a rounded result.

Calculation Logic

The application uses a round helper function to maintain precision up to 12 decimal places, preventing floating-point errors from affecting the user interface.

function compute(a, b, op) {
  switch (op) {
    case '+': return round(a + b);
    case '−': return round(a - b);
    case '×': return round(a * b);
    case '÷': return b === 0 ? 'Error' : round(a / b);
    default:  return b;
  }
}

function round(n) {
  return parseFloat(n.toPrecision(12));
}

Sources: calculator.html:454-465

Sequence of an Operation

The following sequence diagram details the interaction between the user interface and the logic when performing an addition (e.g., "5 + 3 ="):

Special Operations and Utilities

In addition to standard binary operations, the system supports unary operations and display formatting.

• Sign Toggling (handleSign): Multiplies the current value by -1.
• Percentage (handlePercent): Divides the current value by 100.
• Division by Zero: If the divisor b is 0, the compute function returns the string "Error".
• Numeric Formatting: Numbers are formatted using toLocaleString() for readability, and scientific notation is triggered if the absolute value exceeds 1e12 or is less than 1e-6.

Sources: calculator.html:419-428, calculator.html:486-494, calculator.html:459

History Integration

Successful arithmetic operations are recorded in a history list. Each entry stores the full expression (e.g., "5 + 3") and the resulting value.

The history system allows users to retrieve previous results. Clicking a history item sets the current state to that historical result and updates the display, effectively allowing users to use past results in new calculations.

Sources: calculator.html:514-519