Issue 09 | Phase A: UI and Styles Parallel Development

⏱ Est. reading time: 6 min Updated on 5/7/2026

9.1 Actual Output

index.html (created by ui-dev)

<!DOCTYPE html>
<html lang="en" data-theme="standard">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Calculator</h1>
        <button id="btn-mode-toggle" aria-label="Toggle Mode">Toggle Mode</button>
    </header>

    <main>
        <div class="display">
            <div id="expression" class="expression-line" aria-live="polite"></div>
            <div id="result" class="result-line" aria-live="assertive">0</div>
        </div>

        <div class="button-grid">
            <button id="btn-clear" class="btn-wide" data-value="C" aria-label="Clear">C</button>
            <button id="btn-backspace" class="btn-wide" data-value="⌫" aria-label="Backspace">⌫</button>
            <button id="btn-percent" class="btn-operator" data-value="%" aria-label="Percent">%</button>
            <button id="btn-divide" class="btn-operator" data-value="Γ·" aria-label="Divide">Γ·</button>

            <button id="btn-7" class="btn-number" data-value="7" aria-label="Number 7">7</button>
            <!-- ... 4x5 button grid ... -->
        </div>
    </main>

    <aside id="history-panel" aria-label="History">
        <h2>History</h2>
        <ul id="history-list"></ul>
    </aside>

    <script src="app.js"></script>
</body>
</html>

Key Design Decisions:

  • data-value attribute: Uniformly stores button function values, handleButtonClick() dispatches based on this value.
  • aria-live="assertive": Automatically announces changes in results to screen readers.
  • data-theme="standard": Switched on the <html> tag, CSS variables automatically take effect.

style.css (created by ui-dev) β€” CSS Variable Dual Mode

/* Standard mode variables */
:root {
  --btn-bg: #e9ecef;
  --operator-bg: #ff9500;
  --text-color: #333333;
  --border-radius: 12px;
}

/* Senior mode variables β€” one line to switch all */
[data-theme="senior"] {
  --btn-bg: #ffffff;
  --operator-bg: #000000;
  --text-color: #000000;
  --border-radius: 16px;
}

/* Buttons automatically inherit variables */
.btn-number {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  height: 48px;                /* Standard */
}
[data-theme="senior"] .btn-number {
  height: 80px;                /* Senior */
}

/* Transition animation */
button { transition: all 0.3s; }

/* Responsive */
@media (max-width: 768px) {
  .btn-number { height: 44px; }
  [data-theme="senior"] .btn-number { height: 72px; }
}