update calculator

webroot/js/calculator.js

@@ -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)
+        // 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) {
@@ -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>