Keypad Component Interface
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 (Alias for entry point)
The Keypad Component Interface represents the primary interaction layer for the calculator application. It facilitates user input through a grid-based visual interface and physical keyboard mapping, translating user actions into mathematical operations and state updates. This interface is responsible for capturing digits, operators, and functional commands (like clearing or sign toggling) and routing them to the core logic for processing.
The interface is built using semantic HTML5, styled with modern CSS features like CSS Grid and custom properties, and powered by an event-delegation-based JavaScript architecture. It serves as the bridge between the user's intent and the internal state of the calculation engine.
Sources: calculator.html:235-266, calculator.html:437-452
Component Architecture
The keypad is structured as a grid container (.btn-grid) housing various button types. It utilizes ARIA roles (role="group", aria-label) to ensure accessibility for screen readers while maintaining a high-performance interaction model through a single event listener attached to the container.
Visual Organization and Styling
The interface is organized into five rows, using a four-column grid layout. Specific buttons, such as the "0" digit, utilize grid spanning for layout optimization.
| Button Type | Description | Styling Class |
|---|---|---|
| Number | Digits 0-9 and decimal point | .btn-num |
| Operator | Arithmetic functions (+, −, ×, ÷) | .btn-op |
| Function | Utility actions (AC, +/−, %) | .btn-fn |
| Equality | Trigger for result computation | .btn-eq |
Sources: calculator.html:157-220, calculator.html:235-266
Input Handling Flow
The interface handles input via two primary streams: mouse/touch events on the visual buttons and physical keyboard events. Both streams are synchronized to the same internal logic functions.
The diagram above illustrates how the interface normalizes different input methods into standardized logic calls.
Sources: calculator.html:437-471
Event Delegation and Data Attributes
The keypad leverages HTML5 data-* attributes to store metadata about each button's function. This allows the JavaScript engine to identify the required action without parsing the text content of the elements.
data-action: Defines the category of the button (e.g.,digit,op,equals,clear).data-val: Stores the specific numerical value for digit buttons.data-op: Stores the specific operator symbol for arithmetic buttons.
// Example of the event delegation implementation
document.querySelector('.btn-grid').addEventListener('click', e => {
const btn = e.target.closest('.btn');
if (!btn) return;
const action = btn.dataset.action;
if (action === 'digit') inputDigit(btn.dataset.val);
if (action === 'op') handleOp(btn.dataset.op);
// ... other actions
});
Sources: calculator.html:238-266, calculator.html:437-452
Keyboard Integration Interface
To provide a desktop-class experience, the keypad interface includes a comprehensive keyboard listener. This system maps standard physical keys to the calculator's visual actions, including support for specialized keys like Escape and Backspace.
Key Mappings
| Physical Key | Calculator Action | Interface Function |
|---|---|---|
0-9 | Input Digit | inputDigit(key) |
. | Decimal Point | inputDecimal() |
+, -, *, / | Arithmetic Operation | handleOp(op) |
Enter or = | Calculate Result | handleEquals() |
Escape | All Clear (AC) | handleClear() |
Backspace | Delete Last Digit | Inline slice logic |
Sources: calculator.html:455-471
State and Display Synchronization
The keypad interface is tightly coupled with the display component. Every interaction triggers a series of state updates that are immediately reflected in the expression (#expr) and main display (#display) elements.
The sequence diagram shows the flow of data from a keypad interaction through the state management to the final view update.
Sources: calculator.html:333-345, calculator.html:362-373
Technical Summary
The Keypad Component Interface provides a robust, accessible, and responsive input system. By utilizing event delegation and consistent data attributes, it maintains a clean separation between the DOM structure and the mathematical logic. The inclusion of both mouse-driven and keyboard-driven interaction models ensures high usability across different device types.