- Create validator.js with validateNumericInput() function
- Validates numeric strings; allows digits, leading minus, single decimal point
- Rejects invalid characters, multiple decimals, misplaced minus signs
- Returns { isValid, value, sanitized } object
- Link validator.js in index.html <head>
- Update CLAUDE.md project structure to include validator.js
- 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
Create semantic HTML5 structure for calculator interface:
- index.html: two labeled number inputs, four operation buttons,
calculate/clear buttons, result <output>, and error <p role=alert>
with aria-live regions for screen-reader accessibility
- CLAUDE.md: updated project structure and architecture notes
