Alternative Static Hosting

Relevant source files

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

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

Alternative Static Hosting refers to the architectural design of the Calculator application as a self-contained, client-side web application. The project is structured to be hosted on static web servers without the requirement for server-side processing, databases, or specialized back-end environments. This is achieved by encapsulating the User Interface (UI), application logic, and state management within single HTML files and utilizing browser-based storage and execution.

Sources: calculator.html:1-558, README.md

Architectural Overview

The application utilizes a "Single-File Component" approach where HTML, CSS (using Design Tokens), and JavaScript are bundled into a single delivery unit. This architecture facilitates rapid deployment across various static hosting providers (such as GitHub Pages, Vercel, or Netlify) by serving the calculator.html or index.html file directly to the client's browser.

Components of Static Delivery

Component	Implementation Detail	Role
Styling Engine	CSS Variables (:root)	Defines design tokens for light/dark themes, spacing, and typography.
State Manager	JavaScript Let/Const	Maintains transient state for calculations, operations, and reset flags.
Logic Engine	Pure Functions	Handles mathematical computations and string formatting.
History System	JavaScript Arrays	Manages a session-based list of previous calculations.

Sources: calculator.html:10-150, calculator.html:362-370

Client-Side Execution Flow

Since there is no back-end API, all logic resides in the browser. The following diagram illustrates how user interactions are processed entirely within the client environment.

The application handles event delegation by attaching a single listener to the button grid, which then branches logic based on data attributes.
Sources: calculator.html:479-503, calculator.html:380-410

Theming and Design System

The static hosting model includes a pre-configured design system implemented through CSS variables. This allows the application to switch visual modes (Light/Dark) without requesting new assets from the server.

Design Tokens

The application defines a robust set of tokens for consistent UI rendering:

• Colors: Variables like --color-primary and --color-surface adapt based on the [data-theme] attribute.
• Typography: Uses 'DM Sans' for UI elements and 'DM Mono' for the mathematical display to ensure readability.
• Shadows/Radius: Consistent depth and rounding across all buttons and containers.

Sources: calculator.html:10-90

Theme Switching Logic

The theme toggle is handled by a self-invoking JavaScript function that interacts with the localStorage or system preferences via matchMedia.

Data Management and Persistence

The "History" feature maintains a record of the last 20 calculations. In the current static implementation, this data is stored in a volatile JavaScript array, meaning it persists only for the duration of the page session.

Calculation Logic

The core computation is performed by the compute(a, b, op) function, which utilizes standard arithmetic operators and a round helper to manage floating-point precision (up 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;
  }
}

Sources: calculator.html:418-426, calculator.html:432-434

Summary

Alternative Static Hosting for the Calculator project enables a zero-dependency deployment model. By integrating all necessary assets—fonts via Google Fonts preconnect, styles via CSS-in-HTML, and logic via Vanilla JavaScript—the application remains highly portable and performant on any static web server infrastructure.

Sources: calculator.html:1-9, calculator.html:556-558