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 key inputs for most buttons

Browse source
This commit is contained in:
lolabird 2023-12-28 00:20:46 -07:00
commit 0f23a7d239
2 changed files with 44 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

30
index.html
View file

@ -18,27 +18,27 @@
<button class="clear all">C</button> <button class="clear all">C</button>
<button class="clear error">CE</button> <button class="clear error">CE</button>
<button class="plus-minus">+/-</button> <button class="plus-minus">+/-</button>
<button class="operator">*</button> <button id="multiply" class="operator">*</button>
<button class="num">7</button> <button id="num7" class="num">7</button>
<button class="num">8</button> <button id="num8" class="num">8</button>
<button class="num">9</button> <button id="num9" class="num">9</button>
<button class="operator">/</button> <button id="divide" class="operator">/</button>
<button class="num">4</button> <button id="num4" class="num">4</button>
<button class="num">5</button> <button id="num5" class="num">5</button>
<button class="num">6</button> <button id="num6" class="num">6</button>
<button class="operator">-</button> <button id="minus" class="operator">-</button>
<button class="num">1</button> <button id="num1" class="num">1</button>
<button class="num">2</button> <button id="num2" class="num">2</button>
<button class="num">3</button> <button id="num3" class="num">3</button>
<button class="operator">+</button> <button id="plus" class="operator">+</button>
<button class="num">0</button> <button id="num0" class="num">0</button>
<button class="num">.</button> <button id="dec" class="num">.</button>
<button class="equal">=</button> <button class="equal">=</button>
</div> </div>
</main> </main>

35
script.js
View file

@ -5,7 +5,6 @@ const equalButton = document.querySelector(".equal");
const opButtons = document.querySelectorAll(".operator"); const opButtons = document.querySelectorAll(".operator");
const clearButtons = document.querySelectorAll(".clear"); const clearButtons = document.querySelectorAll(".clear");
const plusMinus = document.querySelector(".plus-minus"); const plusMinus = document.querySelector(".plus-minus");
const operators = ["+", "-", "*", "/"];
let inOps = false; let inOps = false;
let isEval = false; let isEval = false;
@ -13,18 +12,15 @@ let isEval = false;
numButtons.forEach((button) => { numButtons.forEach((button) => {
button.addEventListener("click", displayNum); button.addEventListener("click", displayNum);
}); });
opButtons.forEach((button) => { opButtons.forEach((button) => {
button.addEventListener("click", displayOperator); button.addEventListener("click", displayOperator);
}); });
clearButtons.forEach((button) => { clearButtons.forEach((button) => {
button.addEventListener("click", clear); button.addEventListener("click", clear);
}); });
equalButton.addEventListener("click", displayEval); equalButton.addEventListener("click", displayEval);
plusMinus.addEventListener("click", changeSign); plusMinus.addEventListener("click", changeSign);
window.addEventListener("keydown", handleKeys);
function displayEval() { function displayEval() {
@ -181,4 +177,31 @@ function Calculator(str) {
} }
return this.methods[op](a, b); return this.methods[op](a, b);
}; };
} }
function handleKeys(e) {
const operators = {
"+": "plus",
"-": "minus",
"*": "multiply",
"/": "divide"
};
if (e.key >= 0 && e.key <= 9) {
document.querySelector(`#num${e.key}`).click();
} else if (e.key === ".") {
document.querySelector("#dec").click();
} else if (e.key === "Backspace" || e.key === "Delete") {
document.querySelector(".error").click();
} else if (e.key === "c" || e.key === "Escape") {
document.querySelector(".all").click();
} else if (operators.hasOwnProperty(e.key)) {
e.preventDefault();
document.querySelector(`#${operators[e.key]}`).click();
} else if (e.key === "=" || e.key === "Enter") {
e.preventDefault();
document.querySelector(".equal").click();
}
}