scopic-software/test-simple-calculator
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[TSC-3] Build responsive HTML structure with semantic markup

Browse Source 
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
This commit is contained in:
viet-anh.n 2026-07-08 06:19:21 +00:00
parent 15b0201696
commit bca10fcd13
2 changed files with 88 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
CLAUDE.md Normal file
View File

@ -0,0 +1,34 @@
# Simple Calculator
Greenfield project. Implementation is driven by the Vexa AI-SDLC pipeline (Jira project TSC).
## Project Structure
```
/
├── index.html # Calculator UI (semantic HTML5)
├── 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.

54
index.html Normal file
View File

@ -0,0 +1,54 @@
<!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>