Octavia/odin-calculator
Watch
1
0
Fork
You've already forked odin-calculator
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add visual feedback for keyboard input

Browse source
This commit is contained in:
lolabird 2023-12-28 09:44:07 -07:00
commit 6fd432f906
2 changed files with 24 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

25
script.js
View file

@ -202,22 +202,33 @@ function handleKeys(e) {
"/": "divide" "/": "divide"
}; };
let button;
if (e.key >= 0 && e.key <= 9) { if (e.key >= 0 && e.key <= 9) {
document.querySelector(`#num${e.key}`).click(); button = document.querySelector(`#num${e.key}`);
} else if (e.key === ".") { } else if (e.key === ".") {
document.querySelector("#dec").click(); button = document.querySelector("#dec");
} else if (e.key === "Backspace" || e.key === "Delete") { } else if (e.key === "Backspace" || e.key === "Delete") {
document.querySelector(".error").click(); button = document.querySelector(".error");
} else if (e.key === "c" || e.key === "Escape") { } else if (e.key === "c" || e.key === "Escape") {
document.querySelector(".all").click(); button = document.querySelector(".all");
} else if (operators.hasOwnProperty(e.key)) { } else if (operators.hasOwnProperty(e.key)) {
e.preventDefault(); e.preventDefault();
document.querySelector(`#${operators[e.key]}`).click(); button = document.querySelector(`#${operators[e.key]}`);
} else if (e.key === "=" || e.key === "Enter") { } else if (e.key === "=" || e.key === "Enter") {
e.preventDefault(); e.preventDefault();
document.querySelector(".equal").click(); button = document.querySelector(".equal");
} else if (e.key === "_") { } else if (e.key === "_") {
document.querySelector(".plus-minus").click(); button = document.querySelector(".plus-minus");
}
if (button) {
button.classList.add("active");
window.addEventListener("keyup", () => {
button.classList.remove("active")
});
button.click();
} }
} }

6
style.css
View file

@ -63,6 +63,12 @@ button:hover {
filter: brightness(.9); filter: brightness(.9);
} }
button:active, .active {
filter: brightness(.9);
border: 1px solid #888;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
.num, .plus-minus { .num, .plus-minus {
background: #d9e1f2; background: #d9e1f2;
} }