Skip to content

Commit ebf3197

Browse files
anujsharma8danujsharma8d
committed
Link the calculator with the keyboard
1 parent b83f71f commit ebf3197

2 files changed

Lines changed: 146 additions & 57 deletions

File tree

‎web-app/js/projects.js‎

Lines changed: 76 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1323,29 +1323,29 @@ function getCalculatorHTML() {
13231323
<div class="calculator">
13241324
<div class="calc-display" id="calcDisplay">0</div>
13251325
<div class="calc-buttons">
1326-
<button class="calc-btn clear" data-action="clear">C</button>
1327-
<button class="calc-btn operator" data-action="delete">⌫</button>
1328-
<button class="calc-btn operator" data-action="/">/</button>
1329-
<button class="calc-btn operator" data-action="*">×</button>
1326+
<button class="calc-btn clear" data-action="clear" tabindex="-1">C</button>
1327+
<button class="calc-btn operator" data-action="delete" tabindex="-1">⌫</button>
1328+
<button class="calc-btn operator" data-action="/" tabindex="-1">/</button>
1329+
<button class="calc-btn operator" data-action="*" tabindex="-1">×</button>
13301330
1331-
<button class="calc-btn number" data-value="7">7</button>
1332-
<button class="calc-btn number" data-value="8">8</button>
1333-
<button class="calc-btn number" data-value="9">9</button>
1334-
<button class="calc-btn operator" data-action="-">−</button>
1331+
<button class="calc-btn number" data-value="7" tabindex="-1">7</button>
1332+
<button class="calc-btn number" data-value="8" tabindex="-1">8</button>
1333+
<button class="calc-btn number" data-value="9" tabindex="-1">9</button>
1334+
<button class="calc-btn operator" data-action="-" tabindex="-1">−</button>
13351335
1336-
<button class="calc-btn number" data-value="4">4</button>
1337-
<button class="calc-btn number" data-value="5">5</button>
1338-
<button class="calc-btn number" data-value="6">6</button>
1339-
<button class="calc-btn operator" data-action="+">+</button>
1336+
<button class="calc-btn number" data-value="4" tabindex="-1">4</button>
1337+
<button class="calc-btn number" data-value="5" tabindex="-1">5</button>
1338+
<button class="calc-btn number" data-value="6" tabindex="-1">6</button>
1339+
<button class="calc-btn operator" data-action="+" tabindex="-1">+</button>
13401340
1341-
<button class="calc-btn number" data-value="1">1</button>
1342-
<button class="calc-btn number" data-value="2">2</button>
1343-
<button class="calc-btn number" data-value="3">3</button>
1344-
<button class="calc-btn operator" data-action="**">^</button>
1341+
<button class="calc-btn number" data-value="1" tabindex="-1">1</button>
1342+
<button class="calc-btn number" data-value="2" tabindex="-1">2</button>
1343+
<button class="calc-btn number" data-value="3" tabindex="-1">3</button>
1344+
<button class="calc-btn operator" data-action="**" tabindex="-1">^</button>
13451345
1346-
<button class="calc-btn number span-2" data-value="0">0</button>
1347-
<button class="calc-btn number" data-value=".">.</button>
1348-
<button class="calc-btn equals" data-action="=">=</button>
1346+
<button class="calc-btn number span-2" data-value="0" tabindex="-1">0</button>
1347+
<button class="calc-btn number" data-value="." tabindex="-1">.</button>
1348+
<button class="calc-btn equals" data-action="=" tabindex="-1">=</button>
13491349
</div>
13501350
</div>
13511351
</div>
@@ -1421,7 +1421,7 @@ function getCalculatorHTML() {
14211421
</style>
14221422
`;
14231423
}
1424-
1424+
let calculatorKeyboardAdded = false;
14251425
function initCalculator() {
14261426
const display = document.getElementById('calcDisplay');
14271427
let currentValue = '0';
@@ -1442,7 +1442,59 @@ function initCalculator() {
14421442
updateDisplay();
14431443
});
14441444
});
1445-
1445+
if (!calculatorKeyboardAdded) {
1446+
document.addEventListener("keydown", (e) => {
1447+
const display = document.getElementById("calcDisplay");
1448+
if (!display) return;
1449+
1450+
const key = e.key;
1451+
1452+
if (
1453+
key === "Enter" ||
1454+
key === " " ||
1455+
key === "Backspace" ||
1456+
key === "Escape" ||
1457+
key === "=" ||
1458+
key === "+" ||
1459+
key === "-" ||
1460+
key === "*" ||
1461+
key === "/" ||
1462+
key === "^" ||
1463+
key === "." ||
1464+
/^[0-9]$/.test(key) ||
1465+
key.startsWith("Arrow")
1466+
) {
1467+
e.preventDefault();
1468+
}
1469+
1470+
if (/^[0-9]$/.test(key)) {
1471+
handleNumber(key);
1472+
}
1473+
else if (key === ".") {
1474+
handleNumber(".");
1475+
}
1476+
else if (["+", "-", "*", "/"].includes(key)) {
1477+
handleAction(key);
1478+
}
1479+
else if (key === "^") {
1480+
handleAction("**");
1481+
}
1482+
else if (key === "Enter" || key === "=") {
1483+
handleAction("=");
1484+
}
1485+
else if (key === "Backspace") {
1486+
handleAction("delete");
1487+
}
1488+
else if (key === "Escape" || key.toLowerCase() === "c") {
1489+
handleAction("clear");
1490+
}
1491+
1492+
updateDisplay();
1493+
});
1494+
1495+
calculatorKeyboardAdded = true;
1496+
}
1497+
14461498
function handleNumber(num) {
14471499
if (currentValue === '0' || currentValue === 'Error') {
14481500
currentValue = num;
@@ -1494,9 +1546,12 @@ function initCalculator() {
14941546
}
14951547

14961548
function updateDisplay() {
1549+
const display = document.getElementById('calcDisplay');
1550+
if (display) {
14971551
display.textContent = currentValue;
14981552
}
14991553
}
1554+
}
15001555

15011556
// ============================================
15021557
// FIBONACCI

‎web-app/js/projects/calculator.js‎

Lines changed: 70 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,47 @@ function getCalculatorHTML() {
33
<div class="project-content">
44
<h2>🧮 Ultra Pro Calculator</h2>
55
6-
<div class="calculator">
6+
<div class="calculator" tabindex="0">
77
<div class="calc-display" id="calcDisplay">0</div>
88
99
<div class="calc-buttons">
1010
1111
<!-- TOP ROW -->
12-
<button class="calc-btn clear" data-action="clear">C</button>
13-
<button class="calc-btn operator" data-action="delete">⌫</button>
14-
<button class="calc-btn operator" data-action="(">(</button>
15-
<button class="calc-btn operator" data-action=")">)</button>
12+
<button class="calc-btn clear" data-action="clear" tabindex="-1">C</button>
13+
<button class="calc-btn operator" data-action="delete" tabindex="-1">⌫</button>
14+
<button class="calc-btn operator" data-action="(" tabindex="-1">(</button>
15+
<button class="calc-btn operator" data-action=")" tabindex="-1">)</button>
1616
1717
<!-- SCIENTIFIC -->
18-
<button class="calc-btn operator" data-action="sin">sin</button>
19-
<button class="calc-btn operator" data-action="cos">cos</button>
20-
<button class="calc-btn operator" data-action="tan">tan</button>
21-
<button class="calc-btn operator" data-action="sqrt">√</button>
18+
<button class="calc-btn operator" data-action="sin" tabindex="-1">sin</button>
19+
<button class="calc-btn operator" data-action="cos" tabindex="-1">cos</button>
20+
<button class="calc-btn operator" data-action="tan" tabindex="-1">tan</button>
21+
<button class="calc-btn operator" data-action="sqrt" tabindex="-1">√</button>
2222
23-
<button class="calc-btn operator" data-action="square">x²</button>
24-
<button class="calc-btn operator" data-action="inv">1/x</button>
25-
<button class="calc-btn operator" data-action="^">xʸ</button>
26-
<button class="calc-btn operator" data-action="/">÷</button>
23+
<button class="calc-btn operator" data-action="square" tabindex="-1">x²</button>
24+
<button class="calc-btn operator" data-action="inv" tabindex="-1">1/x</button>
25+
<button class="calc-btn operator" data-action="^" tabindex="-1">xʸ</button>
26+
<button class="calc-btn operator" data-action="/" tabindex="-1">÷</button>
2727
2828
<!-- NUMBERS -->
29-
<button class="calc-btn number" data-value="7">7</button>
30-
<button class="calc-btn number" data-value="8">8</button>
31-
<button class="calc-btn number" data-value="9">9</button>
32-
<button class="calc-btn operator" data-action="*">×</button>
29+
<button class="calc-btn number" data-value="7" tabindex="-1">7</button>
30+
<button class="calc-btn number" data-value="8" tabindex="-1">8</button>
31+
<button class="calc-btn number" data-value="9" tabindex="-1">9</button>
32+
<button class="calc-btn operator" data-action="*" tabindex="-1">×</button>
3333
34-
<button class="calc-btn number" data-value="4">4</button>
35-
<button class="calc-btn number" data-value="5">5</button>
36-
<button class="calc-btn number" data-value="6">6</button>
37-
<button class="calc-btn operator" data-action="-">−</button>
34+
<button class="calc-btn number" data-value="4" tabindex="-1">4</button>
35+
<button class="calc-btn number" data-value="5" tabindex="-1">5</button>
36+
<button class="calc-btn number" data-value="6" tabindex="-1">6</button>
37+
<button class="calc-btn operator" data-action="-" tabindex="-1">−</button>
3838
39-
<button class="calc-btn number" data-value="1">1</button>
40-
<button class="calc-btn number" data-value="2">2</button>
41-
<button class="calc-btn number" data-value="3">3</button>
42-
<button class="calc-btn operator" data-action="+">+</button>
39+
<button class="calc-btn number" data-value="1" tabindex="-1">1</button>
40+
<button class="calc-btn number" data-value="2" tabindex="-1">2</button>
41+
<button class="calc-btn number" data-value="3" tabindex="-1">3</button>
42+
<button class="calc-btn operator" data-action="+" tabindex="-1">+</button>
4343
44-
<button class="calc-btn number span-2" data-value="0">0</button>
45-
<button class="calc-btn number" data-value=".">.</button>
46-
<button class="calc-btn equals" data-action="=">=</button>
44+
<button class="calc-btn number span-2" data-value="0" tabindex="-1">0</button>
45+
<button class="calc-btn number" data-value="." tabindex="-1">.</button>
46+
<button class="calc-btn equals" data-action="=" tabindex="-1">=</button>
4747
4848
</div>
4949
</div>
@@ -207,25 +207,59 @@ function initCalculator() {
207207
default:
208208
expression += action;
209209
}
210-
211210
update();
212211
});
213212
});
214213

215214
document.addEventListener("keydown", (e) => {
216215

217-
if (!isNaN(e.key) || e.key === ".") expression += e.key;
216+
const key=e.key;
217+
if(!document.getElementById("calcDisplay")) return;
218+
if(key==="Enter" ||
219+
key==="Backspace" ||
220+
key==="Escape" ||
221+
key==="=" ||
222+
["+","-","*","/","^",".","(",")"].includes(key) ||
223+
/^[0-9]$/.test(key)
224+
) {
225+
e.preventDefault()
226+
}
227+
if(/^[0-9]$/.test(key)){
228+
expression+=key;
229+
}
230+
else if(key==="."){
231+
expression+=".";
232+
}
233+
else if(["+","-","*","/"].includes(key)){
234+
expression+=key;
235+
}
236+
else if(key===")" || key==="("){
237+
expression+=key;
238+
}
239+
else if(key==="^"){
240+
expression+="^";
241+
}
242+
else if(key==="Enter" || key==="="){
243+
expression=safeEval(expression);
244+
}
245+
else if(key==="Backspace"){
246+
expression=expression.slice(0,-1);
247+
}
248+
else if(key==="Escape" || key.toLowerCase()==="c"){
249+
expression="";
250+
}
251+
update();
252+
// if (!isNaN(e.key) || e.key === ".") expression += e.key;
218253

219-
if (["+", "-", "*", "/"].includes(e.key)) expression += e.key;
254+
// if (["+", "-", "*", "/"].includes(e.key)) expression += e.key;
220255

221-
if (e.key === "^") expression += "^";
256+
// if (e.key === "^") expression += "^";
222257

223-
if (e.key === "Enter") expression = safeEval(expression);
258+
// if (e.key === "Enter") expression = safeEval(expression);
224259

225-
if (e.key === "Backspace") expression = expression.slice(0, -1);
260+
// if (e.key === "Backspace") expression = expression.slice(0, -1);
226261

227-
update();
228262
});
229-
263+
230264
update();
231265
}

0 commit comments

Comments
 (0)