mstoeck3/fscalc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update calculator

Browse Source
This commit is contained in:
overcuriousity 2025-10-21 20:49:54 +02:00
parent 16a754fa3f
commit 17df1e80cc
1 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
webroot/js/calculator.js
View File

@ -17,16 +17,32 @@ export class Calculator {
const decStr = value.toString(10); const decStr = value.toString(10);
const binStr = '0b' + value.toString(2); const binStr = '0b' + value.toString(2);
// Update all calculator displays (for current active tab) // Update only the calculator inside the currently active tab to avoid duplicate-id issues
const inputs = document.querySelectorAll('[id*="calcInput"]'); const activeContent = document.querySelector('.tab-content.active');
const hexElements = document.querySelectorAll('[id*="hexValue"]'); if (!activeContent) {
const decElements = document.querySelectorAll('[id*="decValue"]'); // Fallback: try to update the first calculator on the page
const binElements = document.querySelectorAll('[id*="binValue"]'); 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); const input = activeContent.querySelector('.calc-input-field');
hexElements.forEach(el => el.textContent = hexStr); if (input) input.value = hexStr;
decElements.forEach(el => el.textContent = decStr);
binElements.forEach(el => el.textContent = binStr); 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) { input(digit) {
@ -47,7 +63,9 @@ export class Calculator {
} }
operation(operation) { 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); this.equals(false);
} }
@ -166,7 +184,8 @@ export class Calculator {
} else if (key === 'ENTER' || key === '=') { } else if (key === 'ENTER' || key === '=') {
e.preventDefault(); e.preventDefault();
this.equals(); 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(); e.preventDefault();
this.clear(); this.clear();
} else if (key === 'BACKSPACE') { } else if (key === 'BACKSPACE') {
@ -181,20 +200,20 @@ export class Calculator {
<div class="calculator-container"> <div class="calculator-container">
<div class="calc-display"> <div class="calc-display">
<div class="calc-input"> <div class="calc-input">
<input type="text" id="calcInput" placeholder="0x0" readonly> <input type="text" class="calc-input-field" placeholder="0x0" readonly>
</div> </div>
<div class="calc-conversions"> <div class="calc-conversions">
<div class="conversion-row"> <div class="conversion-row">
<span class="conv-label">HEX:</span> <span class="conv-label">HEX:</span>
<span class="conv-value" id="hexValue">0x0</span> <span class="conv-value hex-value">0x0</span>
</div> </div>
<div class="conversion-row"> <div class="conversion-row">
<span class="conv-label">DEC:</span> <span class="conv-label">DEC:</span>
<span class="conv-value" id="decValue">0</span> <span class="conv-value dec-value">0</span>
</div> </div>
<div class="conversion-row"> <div class="conversion-row">
<span class="conv-label">BIN:</span> <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> </div>
</div> </div>
@ -204,7 +223,7 @@ export class Calculator {
<button class="calc-btn number">B</button> <button class="calc-btn number">B</button>
<button class="calc-btn number">C</button> <button class="calc-btn number">C</button>
<button class="calc-btn number">D</button> <button class="calc-btn number">D</button>
<button class="calc-btn clear">C</button> <button class="calc-btn clear">CLR</button>
</div> </div>
<div class="calc-row"> <div class="calc-row">
<button class="calc-btn number">E</button> <button class="calc-btn number">E</button>