Geek Calculator

A single-file, offline-capable calculator with a terminal-like interface. Features basic arithmetic operations, RPN mode, keyboard-first operation, and a "geek vibe" aesthetic.

Features

• Basic arithmetic operations (+, -, ×, ÷)
• Parentheses support for complex expressions
• Percentage calculations
• Positive/negative toggle (±)
• RPN (Reverse Polish Notation) mode
• Full keyboard operation
• Command palette (access with @ key)
• Calculation history with re-run capability
• Terminal-themed UI with ASCII banner
• Full offline capability
• Keyboard accessibility (ARIA roles, focus indicators)

Usage

Basic Operations

• Click buttons or use keyboard: +, -, *, /, =
• Use Enter to evaluate expressions
• Use Escape to clear current input
• Use Backspace to delete last character

RPN Mode

• Toggle RPN mode with the RPN button
• Enter numbers followed by operators
• Example: To calculate 4 + 6, enter: 4 ENTER 6 +

Keyboard Controls

• Numbers: 0-9
• Operators: +, -, *, /
• Equals: Enter or =
• Clear: Escape or C
• Decimal: .
• Backspace: Backspace
• RPN Enter: Enter (in RPN mode)
• Toggle RPN: R
• Command Palette: @
• History Navigation: ↑ and ↓
• Help: ?

Command Palette

• Press @ to open the command palette
• Type commands like "clear", "history", "theme", etc.

Offline Capability

The calculator works completely offline. The first time you load it, it will cache all necessary files using a service worker.

Technical Details

• Pure HTML/CSS/JavaScript (no external dependencies)
• Total payload < 50KB
• Uses ES6 modules for code organization
• Service worker for offline functionality
• LocalStorage for calculation history
• Accessible with full keyboard navigation and ARIA roles

Development

To run tests:

1. Open tests/index.html in your browser
2. Tests will run automatically

Architecture

• calculator.js: Core calculator logic
• rpn-calculator.js: RPN calculator implementation
• ui.js: User interface interactions
• state.js: Application state management
• utils.js: Utility functions
• styles.css: All styling (dark theme, ASCII art, responsive)
• service-worker.js: Offline functionality
• manifest.webmanifest: PWA features

Size Budget

The entire application is designed to stay under 50KB total payload.