bca10fcd13
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
55 lines
1.8 KiB
HTML
55 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>
|
||
</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>
|