Getting Started
Relevant source files
The following files were used as context for generating this wiki page:
The Calculator project is a web-based, client-side application designed to provide a modern, responsive interface for arithmetic operations. Built as a single-file application, it integrates HTML5, CSS3 with design tokens, and vanilla JavaScript to handle state management, mathematical logic, and persistence of calculation history.
This guide outlines the system architecture, component interactions, and the underlying logic required to initialize and operate the calculator. The application features a dual-theme interface (light and dark modes), keyboard support, and a history tracking system.
Sources: calculator.html:1-512
System Architecture and Components
The application follows a modular structure within a single file, separating concerns through CSS variables for styling, HTML for structural layout, and JavaScript for behavioral logic.
UI Components
The user interface is divided into three primary functional areas:
- Header: Contains the application logo and the theme toggle mechanism.
- Calculator Card: Houses the primary display (expression and main result) and the button grid.
- History Section: A persistent area that tracks previous calculations and allows for result recall.
Sources: calculator.html:170-245
Component Interaction Diagram
The following diagram illustrates how user interactions flow through the UI to the underlying logic and back to the display.
The diagram shows the flow from user input through specific logic handlers to state updates and UI rendering.
Sources: calculator.html:363-490
State Management and Core Logic
The application maintains an internal state to track the lifecycle of a calculation. This state determines what is shown on the display and how subsequent inputs are processed.
State Variables
| Variable | Type | Description |
|---|---|---|
current | String | The current numeric value being typed or the result. |
previous | String | The previous value stored before an operator was pressed. |
operator | String/Null | The current arithmetic operator (÷, ×, −, +). |
shouldReset | Boolean | Flag indicating if the next digit should overwrite the current display. |
history | Array | Stores objects containing past expressions and results. |
Sources: calculator.html:314-320
Processing Calculation Logic
When an operation is triggered, the compute function processes the numerical values based on the selected operator.
The sequence diagram demonstrates the interaction between logic and history when a user completes a calculation.
Sources: calculator.html:391-416
Input Handling
Button Actions
The application uses data-action attributes on HTML buttons to determine the functional intent of a user click.
- digit: Appends a number to the current value.
- decimal: Adds a floating point if one does not exist.
- op: Sets the arithmetic operator and moves the current value to
previous. - equals: Triggers the computation of the stored expression.
- clear: Resets the state to the default (0).
Sources: [calculator.html:252-277], calculator.html:474-486
Keyboard Support
The system listens for global keydown events to map physical keys to calculator functions.
| Key | Action |
|---|---|
0-9 | Input Digit |
. | Input Decimal |
+, -, *, / | Operator Selection |
Enter, = | Handle Equals |
Escape | Handle Clear (AC) |
Backspace | Delete last digit |
Sources: calculator.html:488-502
Theme Configuration
The application implements a theme switching system using CSS Design Tokens defined in the :root. Theme preference is initially detected via the prefers-color-scheme media query and can be manually overridden by the user.
// Theme Toggle Logic
const t = document.querySelector('[data-theme-toggle]');
const r = document.documentElement;
let d = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
r.setAttribute('data-theme', d);
// ...
t.addEventListener('click', () => {
d = d === 'dark' ? 'light' : 'dark';
r.setAttribute('data-theme', d);
});
Sources: calculator.html:504-518
The application is fully contained within calculator.html, making it portable and easy to deploy as a static asset.