f77fcbddc9
- 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
56 lines
1.8 KiB
HTML
56 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Simple Calculator</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<h1>Simple Calculator</h1>
|
||
|
||
<form id="calculator-form" novalidate>
|
||
<fieldset>
|
||
<legend>Operands</legend>
|
||
|
||
<div>
|
||
<label for="operand1">First Number</label>
|
||
<input type="number" id="operand1" name="operand1" step="any" required aria-required="true" autocomplete="off">
|
||
</div>
|
||
|
||
<div>
|
||
<label for="operand2">Second Number</label>
|
||
<input type="number" id="operand2" name="operand2" step="any" required aria-required="true" autocomplete="off">
|
||
</div>
|
||
</fieldset>
|
||
|
||
<fieldset>
|
||
<legend>Operation</legend>
|
||
|
||
<div role="group" aria-label="Select operation">
|
||
<button type="button" name="operation" value="add" aria-pressed="false">Add (+)</button>
|
||
<button type="button" name="operation" value="subtract" aria-pressed="false">Subtract (−)</button>
|
||
<button type="button" name="operation" value="multiply" aria-pressed="false">Multiply (×)</button>
|
||
<button type="button" name="operation" value="divide" aria-pressed="false">Divide (÷)</button>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<div>
|
||
<button type="submit" id="calculate-btn">Calculate</button>
|
||
<button type="reset" id="clear-btn">Clear</button>
|
||
</div>
|
||
</form>
|
||
|
||
<section aria-live="polite" aria-atomic="true">
|
||
<h2>Result</h2>
|
||
<output id="result" for="operand1 operand2" aria-label="Calculation result"></output>
|
||
</section>
|
||
|
||
<section aria-live="assertive" aria-atomic="true">
|
||
<p id="error-message" role="alert" aria-label="Error message"></p>
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|