Separate Calculator Logic from the UI

Task

Review the JavaScript and move responsibilities to the file where they belong.

Review

Open:

• js/calculator.js
• js/ui.js
• js/history.js

Use these boundaries:

calculator.js

Keep:

• calculator state
• number input
• decimal input
• operation selection
• arithmetic
• equals
• clear
• backspace
• percentage
• sign toggle

ui.js

Keep:

• DOM references
• click events
• keyboard events
• action translation
• display updates
• theme interaction

history.js

Keep:

• history rendering
• history storage
• history loading
• history clearing/restore behavior

Refactor rule

If a calculator method contains code such as:

document.querySelector(...)

consider whether that DOM work belongs in the UI layer instead.

Likewise, if a button listener contains arithmetic such as:

Number(left) + Number(right)

move that calculation into Calculator.

Do not change behavior while refactoring.

Test

After each small change, test:

• number input
• decimal input
• operations
• equals
• clear
• backspace
• history

Check the browser console after each group.

Checkpoint

The calculator’s responsibilities are separated without changing its visible behavior.