Output Screen Component

Relevant source files

The following files were used as context for generating this wiki page:

• calculator.html
• README.md
• package.json
• .gitignore
• LICENSE

Introduction

The Output Screen Component serves as the primary visual interface for displaying mathematical expressions and their computed results within the Calculator application. It is designed to provide real-time feedback to the user, showcasing both the current input and the historical context of the ongoing calculation.

The component is composed of two distinct layers: an expression display for showing the previous operand and selected operator, and a main display for the current numerical input or final result. This dual-layer approach ensures that users can track their calculation steps clearly.
Sources: calculator.html:248-251, calculator.html:150-160

Architectural Structure

The component is implemented as a flexbox container with a vertical layout, anchored to the bottom to simulate traditional calculator behavior where numbers "push up" from the input line.

Component Hierarchy

The following table describes the primary DOM elements that constitute the Output Screen:

Element ID	Class Name	Description
expr	display-expr	Displays the current mathematical expression (e.g., "10 +").
display	display-main	Displays the primary operand or the final result of a computation.
N/A	display	The parent container managing alignment and padding for the screen.

Sources: calculator.html:249-250, calculator.html:150-175

Visual Flow and Data State

The data flow into the Output Screen is managed by specific helper functions that update the DOM based on the application's internal state variables (current, previous, and operator).

Functional Implementation

Numerical Formatting

To ensure readability, the Output Screen utilizes a formatNum function. This logic prevents the display from breaking with excessively long strings by converting large or microscopic numbers into scientific notation and applying locale-aware digit grouping (commas).

• Maximum Precision: The system rounds calculations to 12 significant digits before display.
• Scientific Notation: Triggered if a number is greater than or equal to $10^{12}$ or smaller than $10^{-6}$.
• Decimal Handling: Separates integer and decimal parts to apply formatting only to the integer portion.

Sources: calculator.html:284-297, calculator.html:344-346

Update Logic

The component provides two specific JavaScript interfaces for updating the screen content:

1. updateDisplay(val, animate): Sets the text content of the primary display. If the animate flag is true, it triggers a CSS "pop" animation by toggling the pop class.
2. updateExpr(val): Directly sets the text content of the expression element above the main display.

Styling and Responsiveness

The Output Screen uses high-contrast design tokens that adapt to both light and dark themes.

• Font Configuration: The main display uses var(--font-mono) (DM Mono) for fixed-width character alignment, which is critical for numerical clarity.
• Dynamic Sizing: The font size is responsive, utilizing clamp(2rem, 8vw, 3rem) to ensure the text scales based on the viewport width while remaining within legible bounds.
• Accessibility: The container is marked with aria-live="polite" and aria-label="Calculator display", ensuring that screen readers announce updates to the numerical values.

Sources: calculator.html:164-166, calculator.html:17-30, calculator.html:248

Summary

The Output Screen Component is a specialized UI module responsible for the clear presentation of calculation data. Through the use of dedicated display layers, robust numerical formatting logic, and responsive CSS, it provides a professional-grade interface for the Calculator application. Its tight integration with the application's state via helper functions ensures that the visual representation always remains synchronized with the underlying mathematical logic.