DOM Tree Layout
Relevant source files
The following files were used as context for generating this wiki page:
The DOM Tree Layout of the Calculator application defines the structural hierarchy and visual organization of the user interface components. It is built using semantic HTML5 elements and styled through a CSS-in-HTML approach, ensuring a responsive and accessible calculation interface. The layout is divided into three primary regions: a header for global controls, a main application area containing the calculator engine, and a history section for session persistence.
The structure leverages a "Single File Component" architecture where the layout, styling (CSS variable-driven design tokens), and behavior (JavaScript state management) coexist within a single document. This facilitates a cohesive data flow between the Document Object Model (DOM) elements and the underlying calculation logic.
Sources: calculator.html:1-356, README.md
Core Component Hierarchy
The application's DOM is structured as a vertical stack of functional containers within the <body> element. Each container serves a distinct purpose in the calculator's lifecycle, from configuration to input and historical tracking.
Structural Overview
The following diagram illustrates the parent-child relationships within the DOM tree:
The hierarchy ensures that global navigation (Header) remains independent of the core application logic (Main).
Sources: calculator.html:200-265
Calculator Interface Components
The primary interaction zone is encapsulated within the div.calc container. It utilizes specific ARIA roles to define its purpose as a functional application.
Display Architecture
The display system consists of two distinct layers to provide feedback on both current input and the active mathematical expression.
| Component ID | Element Type | Purpose | ARIA Attribute |
|---|---|---|---|
expr | div | Displays the pending expression (e.g., "5 + 2") | aria-label="Expression" |
display | div | Displays the current numerical input or result | aria-live="polite" |
Sources: calculator.html:222-225
Button Grid System
The input interface is organized via a CSS Grid (.btn-grid) containing 19 interactive button elements. These are categorized by their data-action attributes, which dictate their functional role in the logic layer.
- Digit Buttons: Represented by
.btn-num, these containdata-valattributes for numeric input (0-9). - Operator Buttons: Represented by
.btn-op, these usedata-opto define mathematical functions (÷, ×, −, +). - Function Buttons: Represented by
.btn-fn, these handle state resets (clear), sign toggling (sign), and percentage conversion (percent).
The layout uses grid-template-columns: repeat(4, 1fr) to maintain a consistent four-column structure, with the zero button spanning two columns.
Sources: calculator.html:125-131, calculator.html:228-254
History Management Layout
The history section (.history-section) is decoupled from the main calculator card to allow for independent scrolling and management of previous results.
List Structure
- Header: Contains the "History" label and a
button#clearHistoryfor state purging. - List Container: A
div#historyListthat serves as the anchor point for dynamicdiv.history-itemelements generated by the JavaScriptrenderHistory()function. - Empty State: A
p#historyEmptyelement that is toggled based on the length of thehistoryarray.
Each history-item includes a span.history-expr and span.history-result, providing a clear summary of past calculations.
Sources: calculator.html:257-268, calculator.html:318-340
Visual State Integration
The DOM layout is deeply integrated with a CSS Variable system (Design Tokens) defined in the :root. This allows for seamless theme switching and state-based styling (e.g., the .pop animation on the display).
| Variable Category | Key Tokens | Usage in Layout |
|---|---|---|
| Colors | --color-bg, --color-surface | Applied to body and card containers |
| Typography | --font-mono, --text-xl | Applied to display-main for numerical clarity |
| Spacing | --space-1 to --space-12 | Used for grid gaps and container padding |
| Borders | --radius-btn, --radius-xl | Defines the rounded aesthetic of the calculator UI |
Sources: calculator.html:14-90
Conclusion
The DOM Tree Layout of the Calculator project is a structured hierarchy designed for high interactivity. By separating the display, input grid, and history into logical containers, the application maintains a clean separation of concerns while providing a responsive user interface that supports both pointer and keyboard interactions.