test-simple-calculator/CLAUDE.md
viet-anh.n f77fcbddc9 [TSC-4] Implement responsive CSS layout and styling
- Add styles.css with mobile-first responsive design (Flexbox/Grid)
- Three breakpoints: mobile (320px+), tablet (768px+), desktop (1024px+)
- All interactive elements meet 44x44px minimum touch target size
- WCAG AA color contrast: text #1a1a1a on white (~17:1), buttons #fff on #1565c0 (~5.85:1), error #c62828 on white (~5.6:1)
- Clear visual hierarchy: h1 > h2 > body text, prominent result area, red error styling
- Link styles.css from index.html
- Update CLAUDE.md project structure to include styles.css
2026-07-08 06:29:14 +00:00

36 lines
1.1 KiB
Markdown

# Simple Calculator
Greenfield project. Implementation is driven by the Vexa AI-SDLC pipeline (Jira project TSC).
## Project Structure
```
/
├── index.html # Calculator UI (semantic HTML5)
├── styles.css # Responsive CSS layout and styling
├── README.md # Project overview
└── CLAUDE.md # This file
```
## Build Commands
No build system has been configured yet. Update this section once a language/framework is chosen and dependencies are added.
## Test Commands
No test suite has been configured yet. Update this section once testing infrastructure is in place.
## Development Commands
No dev server or REPL is configured yet. Update this section once the implementation begins.
## Architecture Notes
- **Domain**: Simple Calculator — arithmetic operations (add, subtract, multiply, divide at minimum).
- **Stack**: Plain HTML/CSS/JS — no framework or build step.
- `index.html` contains the full UI structure: operand inputs, operation buttons, calculate/clear buttons, result `<output>`, and an error `<p role="alert">`.
## Code Style
No linter or formatter has been configured yet. Update this section once tooling is set up.