From ebf3197d5c9669f824d916b0bfaeebf4ef38b5d7 Mon Sep 17 00:00:00 2001
From: Anuj Sharma <anujsharma8d@gmail.com>
Date: Fri, 22 May 2026 20:55:51 +0530
Subject: [PATCH] Link the calculator with the keyboard

---
 web-app/js/projects.js            |  97 +++++++++++++++++++++------
 web-app/js/projects/calculator.js | 106 ++++++++++++++++++++----------
 2 files changed, 146 insertions(+), 57 deletions(-)

diff --git a/web-app/js/projects.js b/web-app/js/projects.js
index 24e291d..82d3e56 100644
--- a/web-app/js/projects.js
+++ b/web-app/js/projects.js
@@ -1323,29 +1323,29 @@ function getCalculatorHTML() {
             <div class="calculator">
                 <div class="calc-display" id="calcDisplay">0</div>
                 <div class="calc-buttons">
-                    <button class="calc-btn clear" data-action="clear">C</button>
-                    <button class="calc-btn operator" data-action="delete">⌫</button>
-                    <button class="calc-btn operator" data-action="/">/</button>
-                    <button class="calc-btn operator" data-action="*">×</button>
+                    <button class="calc-btn clear" data-action="clear" tabindex="-1">C</button>
+                    <button class="calc-btn operator" data-action="delete" tabindex="-1">⌫</button>
+                    <button class="calc-btn operator" data-action="/" tabindex="-1">/</button>
+                    <button class="calc-btn operator" data-action="*" tabindex="-1">×</button>
                     
-                    <button class="calc-btn number" data-value="7">7</button>
-                    <button class="calc-btn number" data-value="8">8</button>
-                    <button class="calc-btn number" data-value="9">9</button>
-                    <button class="calc-btn operator" data-action="-">−</button>
+                    <button class="calc-btn number" data-value="7" tabindex="-1">7</button>
+                    <button class="calc-btn number" data-value="8" tabindex="-1">8</button>
+                    <button class="calc-btn number" data-value="9" tabindex="-1">9</button>
+                    <button class="calc-btn operator" data-action="-" tabindex="-1">−</button>
                     
-                    <button class="calc-btn number" data-value="4">4</button>
-                    <button class="calc-btn number" data-value="5">5</button>
-                    <button class="calc-btn number" data-value="6">6</button>
-                    <button class="calc-btn operator" data-action="+">+</button>
+                    <button class="calc-btn number" data-value="4" tabindex="-1">4</button>
+                    <button class="calc-btn number" data-value="5" tabindex="-1">5</button>
+                    <button class="calc-btn number" data-value="6" tabindex="-1">6</button>
+                    <button class="calc-btn operator" data-action="+" tabindex="-1">+</button>
                     
-                    <button class="calc-btn number" data-value="1">1</button>
-                    <button class="calc-btn number" data-value="2">2</button>
-                    <button class="calc-btn number" data-value="3">3</button>
-                    <button class="calc-btn operator" data-action="**">^</button>
+                    <button class="calc-btn number" data-value="1" tabindex="-1">1</button>
+                    <button class="calc-btn number" data-value="2" tabindex="-1">2</button>
+                    <button class="calc-btn number" data-value="3" tabindex="-1">3</button>
+                    <button class="calc-btn operator" data-action="**" tabindex="-1">^</button>
                     
-                    <button class="calc-btn number span-2" data-value="0">0</button>
-                    <button class="calc-btn number" data-value=".">.</button>
-                    <button class="calc-btn equals" data-action="=">=</button>
+                    <button class="calc-btn number span-2" data-value="0" tabindex="-1">0</button>
+                    <button class="calc-btn number" data-value="." tabindex="-1">.</button>
+                    <button class="calc-btn equals" data-action="=" tabindex="-1">=</button>
                 </div>
             </div>
         </div>
@@ -1421,7 +1421,7 @@ function getCalculatorHTML() {
         </style>
     `;
 }
-
+let calculatorKeyboardAdded = false;
 function initCalculator() {
     const display = document.getElementById('calcDisplay');
     let currentValue = '0';
@@ -1442,7 +1442,59 @@ function initCalculator() {
             updateDisplay();
         });
     });
-    
+   if (!calculatorKeyboardAdded) {
+    document.addEventListener("keydown", (e) => {
+        const display = document.getElementById("calcDisplay");
+        if (!display) return;
+
+        const key = e.key;
+
+        if (
+            key === "Enter" ||
+            key === " " ||
+            key === "Backspace" ||
+            key === "Escape" ||
+            key === "=" ||
+            key === "+" ||
+            key === "-" ||
+            key === "*" ||
+            key === "/" ||
+            key === "^" ||
+            key === "." ||
+            /^[0-9]$/.test(key) ||
+            key.startsWith("Arrow")
+        ) {
+            e.preventDefault();
+        }
+
+        if (/^[0-9]$/.test(key)) {
+            handleNumber(key);
+        } 
+        else if (key === ".") {
+            handleNumber(".");
+        } 
+        else if (["+", "-", "*", "/"].includes(key)) {
+            handleAction(key);
+        } 
+        else if (key === "^") {
+            handleAction("**");
+        } 
+        else if (key === "Enter" || key === "=") {
+            handleAction("=");
+        } 
+        else if (key === "Backspace") {
+            handleAction("delete");
+        } 
+        else if (key === "Escape" || key.toLowerCase() === "c") {
+            handleAction("clear");
+        }
+
+        updateDisplay();
+    });
+
+    calculatorKeyboardAdded = true;
+}
+
     function handleNumber(num) {
         if (currentValue === '0' || currentValue === 'Error') {
             currentValue = num;
@@ -1494,9 +1546,12 @@ function initCalculator() {
     }
     
     function updateDisplay() {
+    const display = document.getElementById('calcDisplay');
+    if (display) {
         display.textContent = currentValue;
     }
 }
+}
 
 // ============================================
 // FIBONACCI
diff --git a/web-app/js/projects/calculator.js b/web-app/js/projects/calculator.js
index efef28f..3def2f0 100644
--- a/web-app/js/projects/calculator.js
+++ b/web-app/js/projects/calculator.js
@@ -3,47 +3,47 @@ function getCalculatorHTML() {
     <div class="project-content">
         <h2>🧮 Ultra Pro Calculator</h2>
 
-        <div class="calculator">
+        <div class="calculator" tabindex="0">
             <div class="calc-display" id="calcDisplay">0</div>
 
             <div class="calc-buttons">
 
                 <!-- TOP ROW -->
-                <button class="calc-btn clear" data-action="clear">C</button>
-                <button class="calc-btn operator" data-action="delete">⌫</button>
-                <button class="calc-btn operator" data-action="(">(</button>
-                <button class="calc-btn operator" data-action=")">)</button>
+                <button class="calc-btn clear" data-action="clear" tabindex="-1">C</button>
+                <button class="calc-btn operator" data-action="delete" tabindex="-1">⌫</button>
+                <button class="calc-btn operator" data-action="(" tabindex="-1">(</button>
+                <button class="calc-btn operator" data-action=")" tabindex="-1">)</button>
 
                 <!-- SCIENTIFIC -->
-                <button class="calc-btn operator" data-action="sin">sin</button>
-                <button class="calc-btn operator" data-action="cos">cos</button>
-                <button class="calc-btn operator" data-action="tan">tan</button>
-                <button class="calc-btn operator" data-action="sqrt">√</button>
+                <button class="calc-btn operator" data-action="sin" tabindex="-1">sin</button>
+                <button class="calc-btn operator" data-action="cos" tabindex="-1">cos</button>
+                <button class="calc-btn operator" data-action="tan" tabindex="-1">tan</button>
+                <button class="calc-btn operator" data-action="sqrt" tabindex="-1">√</button>
 
-                <button class="calc-btn operator" data-action="square">x²</button>
-                <button class="calc-btn operator" data-action="inv">1/x</button>
-                <button class="calc-btn operator" data-action="^">xʸ</button>
-                <button class="calc-btn operator" data-action="/">÷</button>
+                <button class="calc-btn operator" data-action="square" tabindex="-1">x²</button>
+                <button class="calc-btn operator" data-action="inv" tabindex="-1">1/x</button>
+                <button class="calc-btn operator" data-action="^" tabindex="-1">xʸ</button>
+                <button class="calc-btn operator" data-action="/" tabindex="-1">÷</button>
 
                 <!-- NUMBERS -->
-                <button class="calc-btn number" data-value="7">7</button>
-                <button class="calc-btn number" data-value="8">8</button>
-                <button class="calc-btn number" data-value="9">9</button>
-                <button class="calc-btn operator" data-action="*">×</button>
+                <button class="calc-btn number" data-value="7" tabindex="-1">7</button>
+                <button class="calc-btn number" data-value="8" tabindex="-1">8</button>
+                <button class="calc-btn number" data-value="9" tabindex="-1">9</button>
+                <button class="calc-btn operator" data-action="*" tabindex="-1">×</button>
 
-                <button class="calc-btn number" data-value="4">4</button>
-                <button class="calc-btn number" data-value="5">5</button>
-                <button class="calc-btn number" data-value="6">6</button>
-                <button class="calc-btn operator" data-action="-">−</button>
+                <button class="calc-btn number" data-value="4" tabindex="-1">4</button>
+                <button class="calc-btn number" data-value="5" tabindex="-1">5</button>
+                <button class="calc-btn number" data-value="6" tabindex="-1">6</button>
+                <button class="calc-btn operator" data-action="-" tabindex="-1">−</button>
 
-                <button class="calc-btn number" data-value="1">1</button>
-                <button class="calc-btn number" data-value="2">2</button>
-                <button class="calc-btn number" data-value="3">3</button>
-                <button class="calc-btn operator" data-action="+">+</button>
+                <button class="calc-btn number" data-value="1" tabindex="-1">1</button>
+                <button class="calc-btn number" data-value="2" tabindex="-1">2</button>
+                <button class="calc-btn number" data-value="3" tabindex="-1">3</button>
+                <button class="calc-btn operator" data-action="+" tabindex="-1">+</button>
 
-                <button class="calc-btn number span-2" data-value="0">0</button>
-                <button class="calc-btn number" data-value=".">.</button>
-                <button class="calc-btn equals" data-action="=">=</button>
+                <button class="calc-btn number span-2" data-value="0" tabindex="-1">0</button>
+                <button class="calc-btn number" data-value="." tabindex="-1">.</button>
+                <button class="calc-btn equals" data-action="=" tabindex="-1">=</button>
 
             </div>
         </div>
@@ -207,25 +207,59 @@ function initCalculator() {
                 default:
                     expression += action;
             }
-
             update();
         });
     });
 
     document.addEventListener("keydown", (e) => {
 
-        if (!isNaN(e.key) || e.key === ".") expression += e.key;
+        const key=e.key;
+        if(!document.getElementById("calcDisplay")) return;
+        if(key==="Enter" ||
+           key==="Backspace" ||
+           key==="Escape" ||
+           key==="=" ||
+           ["+","-","*","/","^",".","(",")"].includes(key) ||
+           /^[0-9]$/.test(key)
+        ) {
+            e.preventDefault()
+        }
+        if(/^[0-9]$/.test(key)){
+            expression+=key;
+        }
+        else if(key==="."){
+            expression+=".";
+        }
+        else if(["+","-","*","/"].includes(key)){
+            expression+=key;
+        }
+        else if(key===")" || key==="("){
+            expression+=key;
+        }
+        else if(key==="^"){
+            expression+="^";
+        }
+        else if(key==="Enter" || key==="="){
+            expression=safeEval(expression);
+        }
+        else if(key==="Backspace"){
+            expression=expression.slice(0,-1);
+        }
+        else if(key==="Escape" || key.toLowerCase()==="c"){
+            expression="";
+        }
+        update();
+        // if (!isNaN(e.key) || e.key === ".") expression += e.key;
 
-        if (["+", "-", "*", "/"].includes(e.key)) expression += e.key;
+        // if (["+", "-", "*", "/"].includes(e.key)) expression += e.key;
 
-        if (e.key === "^") expression += "^";
+        // if (e.key === "^") expression += "^";
 
-        if (e.key === "Enter") expression = safeEval(expression);
+        // if (e.key === "Enter") expression = safeEval(expression);
 
-        if (e.key === "Backspace") expression = expression.slice(0, -1);
+        // if (e.key === "Backspace") expression = expression.slice(0, -1);
 
-        update();
     });
-
+    
     update();
 }