- 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
36 lines
1.1 KiB
Markdown
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.
|