const ADDITION_OP = "btn-addition" const SUBTRACTION_OP = "btn-subtraction" const MULTIPLY_OP = "btn-multiply" const DIVIDE_OP = "btn-divide" const NONE_OP = "NONE" const NEGATE_OP = "NEGATE" const PERCENTAGE_OP = "PERCENTAGE" let number0, number1 let isReset = true let isChoosingOperator = false let opertator = NONE_OP function clearAction() { if (isReset || getDisplayingNumber().toString().length < 2 || (getDisplayingText().toString().length < 3 && getDisplayingText().includes("-"))) { isReset = true isChoosingOperator = false opertator = NONE_OP displaySetText(0) changeClearButtonLabel("AC") } else { displaySetText(getDisplayingNumber().toString().slice(0, -1)) } holdingOperatorEffect(NONE_OP) } function digitAction(input) { if (isZero() || isReset) { displaySetText(input) isReset = false } else if (getDisplayingText() == "-0") { displaySetText("-" + input) } else { displayAppend(input) } isChoosingOperator = false changeClearButtonLabel("C") holdingOperatorEffect(NONE_OP) } function operatorAction(pressedOperator) { if (opertator == NONE_OP) { number0 = getDisplayingNumber() } else if (!isChoosingOperator) { equalAction() } opertator = pressedOperator isChoosingOperator = true isReset = true holdingOperatorEffect(pressedOperator) console.log(number0 + " " + number1); } function singleOperatorAction(input) { number0 = getDisplayingNumber() switch (input) { case NEGATE_OP: if (getDisplayingText() == "0") { logToScreen("-" + getDisplayingNumber()) break } else if (getDisplayingText() == "-0") { displaySetText(0) break } number0 -= 2 * number0 displaySetText(number0) break case PERCENTAGE_OP: isReset = true displaySetText(number0 / 100) break } holdingOperatorEffect(NONE_OP) } function equalAction() { if (opertator == NONE_OP) { isReset = true return } number1 = getDisplayingNumber() switch (opertator) { case ADDITION_OP: number0 += number1 break case SUBTRACTION_OP: number0 -= number1 break case MULTIPLY_OP: number0 *= number1 break case DIVIDE_OP: if (number1 == 0) { displaySetText("Lỗi") opertator = NONE_OP isReset = true return } console.log(number0); number0 /= number1 break } opertator = NONE_OP isChoosingOperator = false isReset = true displaySetText(number0) holdingOperatorEffect(NONE_OP) } function btn1Action() { digitAction(1) } function btn2Action() { digitAction(2) } function btn3Action() { digitAction(3) } function btn4Action() { digitAction(4) } function btn5Action() { digitAction(5) } function btn6Action() { digitAction(6) } function btn7Action() { digitAction(7) } function btn8Action() { digitAction(8) } function btn9Action() { digitAction(9) } function btn0Action() { digitAction(0) } function btnCommaAction() { if (document.getElementById('display-screen').innerHTML.toString().includes(".")) { return } if (isZero() || isReset) { logToScreen("0.") } else { displayAppend(".") } isReset = false } function btnNegateAction() { singleOperatorAction(NEGATE_OP) } function btnPercentage() { singleOperatorAction(PERCENTAGE_OP) } function btnAddition() { operatorAction(ADDITION_OP) } function btnSubtraction() { operatorAction(SUBTRACTION_OP) } function btnMultiply() { operatorAction(MULTIPLY_OP) } function btnDivide() { operatorAction(DIVIDE_OP) } function displayAppend(input) { if (document.getElementById('display-screen').innerHTML.length >= 10) { return } document.getElementById('display-screen').innerHTML += input } function displaySetText(input) { if (!isNaN(input)) { document.getElementById('display-screen').innerHTML = +parseFloat(input).toPrecision(8).toString() } else { document.getElementById('display-screen').innerHTML = input } } function logToScreen(message) { document.getElementById('display-screen').innerHTML = message } function getDisplayingNumber() { return +document.getElementById('display-screen').innerHTML } function getDisplayingText() { return document.getElementById('display-screen').innerHTML } function changeClearButtonLabel(label) { document.getElementById('btn-clear').innerHTML = label } function isZero() { let displayValue = document.getElementById('display-screen').innerHTML.toString() return displayValue == "0" || displayValue == "0.0" } function holdingOperatorEffect(pressedOperator) { let operators = document.getElementsByClassName("color-orange") for (const op of operators) { op.style.color = "whitesmoke" op.style.backgroundColor = "#ef8911" } if (pressedOperator != NONE_OP) { document.getElementById(pressedOperator).style.backgroundColor = "whitesmoke" document.getElementById(pressedOperator).style.color = "#ef8911" } } document.addEventListener('keydown', (e) => { switch (e.key) { case "Backspace": clearAction() break case "%": btnPercentage() break case "1": btn1Action() break case "2": btn2Action() break case "3": btn3Action() break case "4": btn4Action() break case "5": btn5Action() break case "6": btn6Action() break case "7": btn7Action() break case "8": btn8Action() break case "9": btn9Action() break case "0": btn0Action() break case ".": btnCommaAction() break case "+": btnAddition() break case "-": btnSubtraction() break case "*": btnMultiply() break case "/": btnDivide() break case "=": case "Enter": equalAction() break } }) document.getElementById('btn-1').addEventListener("click", btn1Action) document.getElementById('btn-2').addEventListener("click", btn2Action) document.getElementById('btn-3').addEventListener("click", btn3Action) document.getElementById('btn-4').addEventListener("click", btn4Action) document.getElementById('btn-5').addEventListener("click", btn5Action) document.getElementById('btn-6').addEventListener("click", btn6Action) document.getElementById('btn-7').addEventListener("click", btn7Action) document.getElementById('btn-8').addEventListener("click", btn8Action) document.getElementById('btn-9').addEventListener("click", btn9Action) document.getElementById('btn-0').addEventListener("click", btn0Action) document.getElementById('btn-comma').addEventListener("click", btnCommaAction) document.getElementById('btn-negate').addEventListener("click", btnNegateAction) document.getElementById('btn-percentage').addEventListener("click", btnPercentage) document.getElementById('btn-addition').addEventListener("click", btnAddition) document.getElementById('btn-subtraction').addEventListener("click", btnSubtraction) document.getElementById('btn-multiply').addEventListener("click", btnMultiply) document.getElementById('btn-divide').addEventListener("click", btnDivide) document.getElementById('btn-equal').addEventListener("click", equalAction) document.getElementById('btn-clear').addEventListener("click", clearAction)