89159fb927
- 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
57 lines
1.9 KiB
HTML
57 lines
1.9 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">
|
||
<script src="validator.js"></script>
|
||
</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>
|