Static Site Paradigm

Relevant source files

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

• calculator.html
• README.md
• LICENSE
• .github/workflows/static.yml
• package.json

The Static Site Paradigm within this project refers to the architectural approach of delivering a fully functional calculator application as a single, self-contained HTML document. This model eliminates the need for server-side processing, relying entirely on client-side technologies—HTML5, CSS3 (using modern features like OKLCH color spaces), and Vanilla JavaScript—to manage state, logic, and user interface updates.

This paradigm ensures high performance, offline capability, and simplified deployment. The application logic is encapsulated within a single file, handling everything from mathematical computations and history management to theme persistence and keyboard interactions without external dependencies.

Architecture and Component Structure

The system is built upon a monolithic single-file structure where the view (HTML), style (CSS), and controller logic (JavaScript) coexist. This allows for immediate rendering and zero-latency interactions.

Component Overview

Component	Responsibility	Technical Implementation
Display Engine	Visualizing current input and mathematical expressions.	div#display, div#expr
Input Matrix	Capturing user interaction via touch, click, or keyboard.	div.btn-grid with data-action attributes
State Manager	Maintaining memory of current, previous, and operator values.	JavaScript variables: current, previous, operator
History Ledger	Persisting and rendering previous calculation results.	history array and renderHistory() function
Theme Engine	Managing light/dark mode transitions and system preferences.	CSS :root variables and data-theme attributes

Sources: calculator.html:11-150, calculator.html:360-375

Data Flow Logic

The application follows a reactive-like pattern where user inputs trigger state changes, which in turn invoke specific update functions to synchronize the DOM with the internal state.

The flow ensures that every interaction, whether from the physical keyboard or the virtual button grid, passes through a centralized logic layer.
Sources: calculator.html:438-472

Core Computation Logic

The mathematical core of the paradigm relies on floating-point arithmetic handled directly by the JavaScript engine. To maintain precision and handle standard calculator behavior, specific rounding and formatting functions are employed.

Mathematical Operations

The compute function handles the binary operations supported by the system.

Operator	Action	Implementation Detail
+	Addition	a + b
−	Subtraction	a - b
×	Multiplication	a * b
÷	Division	Includes zero-division check returning 'Error'

Sources: calculator.html:402-411

Precision and Formatting

To prevent floating-point artifacts (e.g., 0.1 + 0.2), the system uses a round function that limits precision to 12 significant digits. The formatNum function then prepares these values for the UI, handling locale-specific thousands separators and scientific notation for extreme values.

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

function formatNum(n) {
  const num = parseFloat(n);
  if (isNaN(num)) return n;
  if (Math.abs(num) >= 1e12 || (Math.abs(num) < 1e-6 && num !== 0)) {
    return num.toExponential(4);
  }
  // ... handling decimals and locale
}

Sources: calculator.html:376-390, calculator.html:413-415

State Management and Transitions

The application state is managed through a set of global variables that track the lifecycle of a calculation.

State Variables

• current: A string representing the number currently being typed or the result of a calculation.
• previous: Stores the operand before an operator was selected.
• operator: Holds the active mathematical operation.
• shouldReset: A boolean flag indicating if the next digit input should overwrite the current value (used after an operation or equals is pressed).

Sources: calculator.html:361-365

State Transition Diagram

The following diagram illustrates how the system transitions between different input states.

Theme and Visual Paradigm

The project utilizes a CSS-driven theme engine that supports both explicit user toggles and system-level media queries (prefers-color-scheme).

Design Tokens

The visual identity is defined through CSS custom properties (variables) assigned to the :root. This allows the JavaScript logic to simply toggle a data-theme attribute on the <html> element to change the entire application's appearance.

• Light Mode: High-contrast, warm grays (#f7f6f2).
• Dark Mode: Low-light, deep charcoals (#171614).
• Dynamic Shadows: Uses oklch color functions to maintain perceptual uniformity across themes.

Sources: calculator.html:13-75

Conclusion

The Static Site Paradigm used in this project demonstrates a modern approach to simple utility applications. By consolidating logic and presentation into a single, high-performance file, it achieves maximum portability and responsiveness while utilizing modern browser features like the OKLCH color model and advanced CSS grid layouts.