update mouse ponter position

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>

webroot/js/utils.js

@@ -99,24 +99,23 @@ export function createTooltip() {
     }
 }
 
-export function showTooltip(element, text) {
+export function showTooltipAt(x, y, text) {
     createTooltip();
     tooltip.innerHTML = text;
     tooltip.style.display = 'block';
 
-    const rect = element.getBoundingClientRect();
     const tooltipRect = tooltip.getBoundingClientRect();
+    let left = x + 12; // offset from mouse pointer
+    let top = y + 12;
 
-    let left = rect.left + (rect.width / 2) - (tooltipRect.width / 2);
-    let top = rect.top - tooltipRect.height - 8;
-
-    if (left < 10) left = 10;
     if (left + tooltipRect.width > window.innerWidth - 10) {
         left = window.innerWidth - tooltipRect.width - 10;
     }
-    if (top < 10) {
+    if (top + tooltipRect.height > window.innerHeight - 10) {
-        top = rect.bottom + 8;
+        top = y - tooltipRect.height - 12;
     }
+    if (left < 10) left = 10;
+    if (top < 10) top = 10;
 
     tooltip.style.left = left + 'px';
     tooltip.style.top = top + 'px';
@@ -130,17 +129,19 @@ export function hideTooltip() {
 
 // Setup tooltip event listeners
 export function setupTooltips() {
-    document.addEventListener('mouseover', function (e) {
+    document.addEventListener('mousemove', function (e) {
         if (e.target.classList.contains('result-label')) {
             const formula = e.target.getAttribute('data-formula');
             if (formula) {
-                showTooltip(e.target, `Formel: ${formula}`);
+                showTooltipAt(e.clientX, e.clientY, `Formel: ${formula}`);
             }
         } else if (e.target.classList.contains('result-value')) {
             const formula = e.target.getAttribute('data-result-formula');
             if (formula && formula !== '') {
-                showTooltip(e.target, `Berechnung: ${formula}`);
+                showTooltipAt(e.clientX, e.clientY, `Berechnung: ${formula}`);
             }
+        } else {
+            hideTooltip();
         }
     });