Application State Management

The Application State Management system within the Calculator project is a client-side architecture designed to maintain the integrity of mathematical operations, UI synchronization, and user preferences. It utilizes a centralized set of global variables within the JavaScript runtime to track the lifecycle of a calculation, including operand input, operator selection, and result computation.

The system ensures that the Document Object Model (DOM) accurately reflects the internal logic state, providing immediate visual feedback for user interactions. Beyond active calculations, the state management also encompasses a historical record of operations and persistence for user interface themes (light/dark modes).

Core State Variables

The application's logic is driven by five primary state variables that define the current context of the calculator at any given moment.

Sources: calculator.html:324-329

Calculation Lifecycle and Data Flow

The state transitions through various phases based on user input. When a user inputs a digit, the inputDigit(d) function updates the current state. If an operator is selected via handleOp(op), the current value is migrated to previous, and the operator state is set.

The following diagram illustrates the flow of data when a user performs a standard addition operation:

Arithmetic Processing

The compute(a, b, op) function serves as the pure logic engine, taking state values as arguments and returning a calculated result. To maintain precision and avoid floating-point artifacts, the system utilizes a round(n) helper that limits results to 12 significant digits.

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:381-392

History State Persistence

The application maintains a session-based history state. Every time a user triggers handleEquals(), a new record is generated and prepended to the history array. The system imposes a hard limit on this state to prevent memory bloat.

• Maximum Records: 20 entries.
• Structure: Each entry is an object: { expr: string, result: number }.
• Interaction: Clicking a history item restores that specific result into the active current state variable, effectively performing a state "rollback" to a previous value.

Sources: calculator.html:416-444

UI State Synchronization

The system employs several helper functions to ensure the DOM (the visual layer) remains in sync with the internal JavaScript state.

1. updateDisplay(val, animate): Synchronizes the current variable with the main number display, including formatting for locale and scientific notation if the number exceeds $10^{12}$.
2. updateExpr(val): Synchronizes the sub-display showing the mathematical expression currently being built (e.g., "10 + ").
3. renderHistory(): Completely clears and rebuilds the history list in the DOM whenever the history array is modified.

Sources: calculator.html:336-347, calculator.html:422-440

Theme State Management

The visual theme (Light vs. Dark) is managed through a data-attribute on the root HTML element. Unlike the mathematical state, the theme state is toggled via an Immediately Invoked Function Expression (IIFE) that listens for system preferences or user overrides.

The state management system in the Calculator project effectively separates user input handling, mathematical computation, and visual rendering. By using a combination of global primitives for calculation and a structured array for history, the application provides a robust and predictable user experience.