Display Update Logic
Relevant source files
The following files were used as context for generating this wiki page:
The Display Update Logic is the central mechanism for synchronizing the internal mathematical state of the calculator with the Document Object Model (DOM). It ensures that user inputs, intermediate operations, and final results are formatted correctly and presented visually within the two primary display areas: the expression preview and the main result display.
Sources: calculator.html:215-225, calculator.html:367-375
Architectural Overview
The display logic follows a unidirectional data flow where state changes in the JavaScript engine trigger specific helper functions to update the UI elements. The system distinguishes between the "main" display, which shows the current input or result, and the "expression" display, which provides context for the ongoing calculation.
UI Components
| Component | DOM ID | Purpose |
|---|---|---|
| Main Display | display | Shows the active number being typed or the final result of a calculation. |
| Expression Display | expr | Shows the previous operand and the selected operator. |
| History List | historyList | Displays a list of previous calculations. |
Sources: calculator.html:219-222, calculator.html:367-370
Core Display Functions
The application utilizes specialized functions to manage the complexity of number formatting and visual feedback.
Number Formatting Logic
The formatNum(n) function handles the conversion of raw numeric strings or values into human-readable formats. It manages:
- Scientific Notation: Automatically converts numbers to exponential form if they exceed $10^{12}$ or are smaller than $10^{-6}$.
- Locale Formatting: Uses
toLocaleString()to add group separators (e.g., commas) to large integers. - Decimal Preservation: Ensures that decimal parts are not lost during locale formatting by splitting the string at the decimal point.
Sources: calculator.html:376-391
Update Procedures
The system uses two primary helpers to modify the DOM:
updateDisplay(val, animate): Sets thetextContentof the main display. If theanimateflag is true, it triggers a CSS "pop" animation by toggling thepopclass.updateExpr(val): Directly sets thetextContentof the expression element above the main display.
Sources: calculator.html:393-401, calculator.html:403-403
State-to-Display Mapping
The internal state consists of current, previous, and operator. The following diagram illustrates how these variables map to the UI during different phases of operation.
The logic ensures that the display remains consistent with the underlying state variables.
Sources: calculator.html:360-365, calculator.html:406-411
Calculation Sequence and Visual Feedback
When a calculation is performed, the sequence of updates ensures the user receives immediate feedback.
The use of the animate parameter in handleEquals provides a tactile feel to the interface, signaling that a calculation has been finalized.
Sources: calculator.html:442-454, calculator.html:150-155
History Rendering
The history panel is updated via renderHistory(), which clears the current list and repopulates it from the history array. Each item is assigned an aria-label for accessibility and a click listener that allows users to restore a previous result to the main display.
Sources: calculator.html:474-497
Conclusion
The display update logic in this project is designed for clarity and responsiveness. By decoupling mathematical computation from UI rendering through helper functions like formatNum and updateDisplay, the system maintains a clean separation of concerns while providing sophisticated features like automatic scientific notation and CSS-driven animations.