update calculator
This commit is contained in:
parent
16a754fa3f
commit
17df1e80cc
@ -17,16 +17,32 @@ export class Calculator {
|
||||
const decStr = value.toString(10);
|
||||
const binStr = '0b' + value.toString(2);
|
||||
|
||||
// Update all calculator displays (for current active tab)
|
||||
const inputs = document.querySelectorAll('[id*="calcInput"]');
|
||||
const hexElements = document.querySelectorAll('[id*="hexValue"]');
|
||||
const decElements = document.querySelectorAll('[id*="decValue"]');
|
||||
const binElements = document.querySelectorAll('[id*="binValue"]');
|
||||
// Update only the calculator inside the currently active tab to avoid duplicate-id issues
|
||||
const activeContent = document.querySelector('.tab-content.active');
|
||||
if (!activeContent) {
|
||||
// Fallback: try to update the first calculator on the page
|
||||
const fallbackInput = document.querySelector('.calc-input-field');
|
||||
if (fallbackInput) fallbackInput.value = hexStr;
|
||||
const fallbackHex = document.querySelector('.hex-value');
|
||||
if (fallbackHex) fallbackHex.textContent = hexStr;
|
||||
const fallbackDec = document.querySelector('.dec-value');
|
||||
if (fallbackDec) fallbackDec.textContent = decStr;
|
||||
const fallbackBin = document.querySelector('.bin-value');
|
||||
if (fallbackBin) fallbackBin.textContent = binStr;
|
||||
return;
|
||||
}
|
||||
|
||||
inputs.forEach(input => input.value = hexStr);
|
||||
hexElements.forEach(el => el.textContent = hexStr);
|
||||
decElements.forEach(el => el.textContent = decStr);
|
||||
binElements.forEach(el => el.textContent = binStr);
|
||||
const input = activeContent.querySelector('.calc-input-field');
|
||||
if (input) input.value = hexStr;
|
||||
|
||||
const hexElement = activeContent.querySelector('.hex-value');
|
||||
if (hexElement) hexElement.textContent = hexStr;
|
||||
|
||||
const decElement = activeContent.querySelector('.dec-value');
|
||||
if (decElement) decElement.textContent = decStr;
|
||||
|
||||
const binElement = activeContent.querySelector('.bin-value');
|
||||
if (binElement) binElement.textContent = binStr;
|
||||
}
|
||||
|
||||
input(digit) {
|
||||
@ -47,7 +63,9 @@ export class Calculator {
|
||||
}
|
||||
|
||||
operation(operation) {
|
||||
if (this.state.previousValue !== 0 && !this.state.waitingForOperand) {
|
||||
// If there is a pending operation and we are not waiting for a new operand,
|
||||
// evaluate it first so chained operations work as expected.
|
||||
if (this.state.operation !== null && !this.state.waitingForOperand) {
|
||||
this.equals(false);
|
||||
}
|
||||
|
||||
@ -166,7 +184,8 @@ export class Calculator {
|
||||
} else if (key === 'ENTER' || key === '=') {
|
||||
e.preventDefault();
|
||||
this.equals();
|
||||
} else if (key === 'ESCAPE' || key === 'C') {
|
||||
} else if (key === 'ESCAPE' || key === 'DELETE') {
|
||||
// Use Escape or Delete to clear. Do not use 'C' since it collides with hex digit C.
|
||||
e.preventDefault();
|
||||
this.clear();
|
||||
} else if (key === 'BACKSPACE') {
|
||||
@ -181,20 +200,20 @@ export class Calculator {
|
||||
<div class="calculator-container">
|
||||
<div class="calc-display">
|
||||
<div class="calc-input">
|
||||
<input type="text" id="calcInput" placeholder="0x0" readonly>
|
||||
<input type="text" class="calc-input-field" placeholder="0x0" readonly>
|
||||
</div>
|
||||
<div class="calc-conversions">
|
||||
<div class="conversion-row">
|
||||
<span class="conv-label">HEX:</span>
|
||||
<span class="conv-value" id="hexValue">0x0</span>
|
||||
<span class="conv-value hex-value">0x0</span>
|
||||
</div>
|
||||
<div class="conversion-row">
|
||||
<span class="conv-label">DEC:</span>
|
||||
<span class="conv-value" id="decValue">0</span>
|
||||
<span class="conv-value dec-value">0</span>
|
||||
</div>
|
||||
<div class="conversion-row">
|
||||
<span class="conv-label">BIN:</span>
|
||||
<span class="conv-value" id="binValue">0b0</span>
|
||||
<span class="conv-value bin-value">0b0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -204,7 +223,7 @@ export class Calculator {
|
||||
<button class="calc-btn number">B</button>
|
||||
<button class="calc-btn number">C</button>
|
||||
<button class="calc-btn number">D</button>
|
||||
<button class="calc-btn clear">C</button>
|
||||
<button class="calc-btn clear">CLR</button>
|
||||
</div>
|
||||
<div class="calc-row">
|
||||
<button class="calc-btn number">E</button>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user