Add Numpad functionality

- Proabably as good as I can get it right now, accessibility is my main focus on the calculator now
zalbright90 · Jul 16, 2024 · 4c81ecd · 4c81ecd
1 parent 06d507c
commit 4c81ecd
Showing 1 changed file with 58 additions and 28 deletions.
diff --git a/main.js b/main.js
@@ -4,7 +4,7 @@ document.addEventListener('DOMContentLoaded', function() {
     let secondNumber = "";
     let operator = "";
     let calculationJustCompleted = false;
-    const   MAX_DISPLAY_LENGTH = 18;
+    const MAX_DISPLAY_LENGTH = 18;
 
     const displayOutput = document.querySelector('#output');
 
@@ -17,9 +17,6 @@ document.addEventListener('DOMContentLoaded', function() {
             displayValue = "";
             calculationJustCompleted = false;
         }
-        if (displayValue === "0" && value !== ".") {
-            displayValue = "";
-        }
         displayValue += value;
         if (displayValue.length > MAX_DISPLAY_LENGTH) {
             displayValue = parseFloat(displayValue).toExponential(MAX_DISPLAY_LENGTH - 7);
@@ -48,8 +45,8 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     function toggleSign() {
-        if(displayValue !== '0') {
-            displayValue = (parseFloat (displayValue) * -1).toString();
+        if (displayValue !== '0') {
+            displayValue = (parseFloat(displayValue) * -1).toString();
             displayOutput.textContent = displayValue;
         }
     }
@@ -58,29 +55,28 @@ document.addEventListener('DOMContentLoaded', function() {
         if (displayValue.length > 1) {
             displayValue = displayValue.slice(0, -1);
         } else {
-            displayValue ='0';
+            displayValue = '0';
         }
         displayOutput.textContent = displayValue;
     }
 
-    function percent () {
-        if(displayValue !== '0') {
+    function percent() {
+        if (displayValue !== '0') {
             displayValue = (parseFloat(displayValue) / 100).toString();
             if (displayValue.length > MAX_DISPLAY_LENGTH) {
                 displayValue = parseFloat(displayValue).toExponential(MAX_DISPLAY_LENGTH - 7);
             }
             displayOutput.textContent = displayValue;
         }
-
     }
 
-    function calculate () {
+    function calculate() {
         if (firstNumber !== "" && operator !== "" && displayValue !== "") {
             secondNumber = displayValue;
             let result;
             try {
                 result = operate(parseFloat(firstNumber), operator, parseFloat(secondNumber));
-                if(!isFinite(result)) {
+                if (!isFinite(result)) {
                     throw new Error("Division by zero");
                 }
                 displayValue = result.toString();
@@ -90,41 +86,41 @@ document.addEventListener('DOMContentLoaded', function() {
             } catch (error) {
                 displayValue = error.message === "Division by zero" ? "Nice try, wizard" : "Error";
             }
-                displayOutput.textContent = displayValue;
-                firstNumber = displayValue;
-                secondNumber = "";
-                operator = "";
-                calculationJustCompleted = true;
-        } 
+            displayOutput.textContent = displayValue;
+            firstNumber = displayValue;
+            secondNumber = "";
+            operator = "";
+            calculationJustCompleted = true;
+        }
     }
 
     function operate(a, operator, b) {
-        switch(operator) {
+        switch (operator) {
             case '+': return a + b;
             case '-': return a - b;
-            case '*': return (a * b);
+            case '*': return a * b;
             case '/': 
                 if (b === 0) return "Error";
-                return (a / b);
+                return a / b;
         }
     }
 
     ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'].forEach((className, index) => {
-    document.querySelector(`.${className}`).addEventListener('click', () => updateDisplay(index.toString()));
+        document.querySelector(`.${className}`).addEventListener('click', () => updateDisplay(index.toString()));
     });
 
     [
         { op: '+', className: 'add' },
         { op: '-', className: 'subtract' },
         { op: '*', className: 'multiply' },
-        { op: '/', className: 'divide'}
+        { op: '/', className: 'divide' }
     ].forEach(({ op, className }) => {
         const operatorChoice = document.querySelector(`.${className}`);
         operatorChoice.addEventListener('click', () => setOperator(op));
     });
 
     const dotButton = document.querySelector('.dot')
-        dotButton.addEventListener('click', () => {
+    dotButton.addEventListener('click', () => {
         if (!displayValue.includes('.')) {
             updateDisplay('.');
         }
@@ -142,12 +138,46 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     };
 
-    window.addEventListener('keydown', function(e){
-        const key = document.querySelector(`button[data-key='${e.key}']`);
-        if (key) {
-            key.click();
+    const numpadKeyMap = {
+        'Numpad0': '0',
+        'Numpad1': '1',
+        'Numpad2': '2',
+        'Numpad3': '3',
+        'Numpad4': '4',
+        'Numpad5': '5',
+        'Numpad6': '6',
+        'Numpad7': '7',
+        'Numpad8': '8',
+        'Numpad9': '9',
+        'NumpadAdd': '+',
+        'NumpadSubtract': '-',
+        'NumpadMultiply': '*',
+        'NumpadDivide': '/',
+        'NumpadDecimal': '.',
+        'Enter': '=',
+        'NumpadEnter': '='
+    };
+
+    window.addEventListener('keydown', function(e) {
+        let key = numpadKeyMap[e.code] || e.key;
+        console.log(`Key pressed: ${e.key}, Key code: ${e.code}, Mapped key: ${key}`);
+        if (numpadKeyMap[e.code]) {
+            if (!isNaN(numpadKeyMap[e.code])) {
+                updateDisplay(numpadKeyMap[e.code]);
+            } else if (numpadKeyMap[e.code] === '.') {
+                if(!displayValue.includes('.')) {
+                    updateDisplay('.');
+                }
+            } else {
+                const button = document.querySelector(`button[data-key='${key}']`);
+                if (button) {
+                    button.click();
+                }
+            }
         } else if (e.key === 'Backspace') {
             backspace();
+        } else if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+            calculate();
         }
     });
 });