Skip to content

Commit bea8fb6

Browse files
steam-bell-92steam-bell-92
authored
Merge pull request #613 from anujsharma8d/feat/link-calc-with-keyboard
Link the calculator with the keyboard
2 parents 093b46b + ebf3197 commit bea8fb6

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
@@ -1097,29 +1097,29 @@ function getCalculatorHTML() {
10971097
<div class="calculator">
10981098
<div class="calc-display" id="calcDisplay">0</div>
10991099
<div class="calc-buttons">
1100-
<button class="calc-btn clear" data-action="clear">C</button>
1101-
<button class="calc-btn operator" data-action="delete">⌫</button>
1102-
<button class="calc-btn operator" data-action="/">/</button>
1103-
<button class="calc-btn operator" data-action="*">×</button>
1100+
<button class="calc-btn clear" data-action="clear" tabindex="-1">C</button>
1101+
<button class="calc-btn operator" data-action="delete" tabindex="-1">⌫</button>
1102+
<button class="calc-btn operator" data-action="/" tabindex="-1">/</button>
1103+
<button class="calc-btn operator" data-action="*" tabindex="-1">×</button>
11041104
1105-
<button class="calc-btn number" data-value="7">7</button>
1106-
<button class="calc-btn number" data-value="8">8</button>
1107-
<button class="calc-btn number" data-value="9">9</button>
1108-
<button class="calc-btn operator" data-action="-">−</button>
1105+
<button class="calc-btn number" data-value="7" tabindex="-1">7</button>
1106+
<button class="calc-btn number" data-value="8" tabindex="-1">8</button>
1107+
<button class="calc-btn number" data-value="9" tabindex="-1">9</button>
1108+
<button class="calc-btn operator" data-action="-" tabindex="-1">−</button>
11091109
1110-
<button class="calc-btn number" data-value="4">4</button>
1111-
<button class="calc-btn number" data-value="5">5</button>
1112-
<button class="calc-btn number" data-value="6">6</button>
1113-
<button class="calc-btn operator" data-action="+">+</button>
1110+
<button class="calc-btn number" data-value="4" tabindex="-1">4</button>
1111+
<button class="calc-btn number" data-value="5" tabindex="-1">5</button>
1112+
<button class="calc-btn number" data-value="6" tabindex="-1">6</button>
1113+
<button class="calc-btn operator" data-action="+" tabindex="-1">+</button>
11141114
1115-
<button class="calc-btn number" data-value="1">1</button>
1116-
<button class="calc-btn number" data-value="2">2</button>
1117-
<button class="calc-btn number" data-value="3">3</button>
1118-
<button class="calc-btn operator" data-action="**">^</button>
1115+
<button class="calc-btn number" data-value="1" tabindex="-1">1</button>
1116+
<button class="calc-btn number" data-value="2" tabindex="-1">2</button>
1117+
<button class="calc-btn number" data-value="3" tabindex="-1">3</button>
1118+
<button class="calc-btn operator" data-action="**" tabindex="-1">^</button>
11191119
1120-
<button class="calc-btn number span-2" data-value="0">0</button>
1121-
<button class="calc-btn number" data-value=".">.</button>
1122-
<button class="calc-btn equals" data-action="=">=</button>
1120+
<button class="calc-btn number span-2" data-value="0" tabindex="-1">0</button>
1121+
<button class="calc-btn number" data-value="." tabindex="-1">.</button>
1122+
<button class="calc-btn equals" data-action="=" tabindex="-1">=</button>
11231123
</div>
11241124
</div>
11251125
</div>
@@ -1195,7 +1195,7 @@ function getCalculatorHTML() {
11951195
</style>
11961196
`;
11971197
}
1198-
1198+
let calculatorKeyboardAdded = false;
11991199
function initCalculator() {
12001200
const display = document.getElementById('calcDisplay');
12011201
let currentValue = '0';
@@ -1216,7 +1216,59 @@ function initCalculator() {
12161216
updateDisplay();
12171217
});
12181218
});
1219-
1219+
if (!calculatorKeyboardAdded) {
1220+
document.addEventListener("keydown", (e) => {
1221+
const display = document.getElementById("calcDisplay");
1222+
if (!display) return;
1223+
1224+
const key = e.key;
1225+
1226+
if (
1227+
key === "Enter" ||
1228+
key === " " ||
1229+
key === "Backspace" ||
1230+
key === "Escape" ||
1231+
key === "=" ||
1232+
key === "+" ||
1233+
key === "-" ||
1234+
key === "*" ||
1235+
key === "/" ||
1236+
key === "^" ||
1237+
key === "." ||
1238+
/^[0-9]$/.test(key) ||
1239+
key.startsWith("Arrow")
1240+
) {
1241+
e.preventDefault();
1242+
}
1243+
1244+
if (/^[0-9]$/.test(key)) {
1245+
handleNumber(key);
1246+
}
1247+
else if (key === ".") {
1248+
handleNumber(".");
1249+
}
1250+
else if (["+", "-", "*", "/"].includes(key)) {
1251+
handleAction(key);
1252+
}
1253+
else if (key === "^") {
1254+
handleAction("**");
1255+
}
1256+
else if (key === "Enter" || key === "=") {
1257+
handleAction("=");
1258+
}
1259+
else if (key === "Backspace") {
1260+
handleAction("delete");
1261+
}
1262+
else if (key === "Escape" || key.toLowerCase() === "c") {
1263+
handleAction("clear");
1264+
}
1265+
1266+
updateDisplay();
1267+
});
1268+
1269+
calculatorKeyboardAdded = true;
1270+
}
1271+
12201272
function handleNumber(num) {
12211273
if (currentValue === '0' || currentValue === 'Error') {
12221274
currentValue = num;
@@ -1268,9 +1320,12 @@ function initCalculator() {
12681320
}
12691321

12701322
function updateDisplay() {
1323+
const display = document.getElementById('calcDisplay');
1324+
if (display) {
12711325
display.textContent = currentValue;
12721326
}
12731327
}
1328+
}
12741329

12751330
// ============================================
12761331
// 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)