问计算器中的错误(阶乘)

EN

let firstOperand = "";
let secondOperand = "";
let currentOperation = null;
let toResetScreen = false;

const display = document.querySelector("#display");
const mainScreen = document.querySelector("#main-screen");
const historyScreen = document.querySelector("#history-screen");
const numberButtons = document.querySelectorAll(".number");
const operatorButtons = document.querySelectorAll(".operator");
const equalityButton = document.querySelector("#equality");
const decimalPointButton = document.querySelector("#decimal-point");
const signChangeButton = document.querySelector("#sign-change");
const clearButton = document.querySelector("#clear");
const backspaceButton = document.querySelector("#backspace");
const errorMessage = document.querySelector("#error-message");
errorMessage.textContent = "You should know that division by 0 is impossible! Press 'Clear' and start over...";

window.addEventListener("keydown", handleKeyboardInput);
equalityButton.addEventListener("click", evaluate);
clearButton.addEventListener("click", clearScreen);
backspaceButton.addEventListener("click", deleteNumber);
decimalPointButton.addEventListener("click", appendDecimalPoint);
signChangeButton.addEventListener("click", changeSign);
numberButtons.forEach((button) => button.addEventListener("click", () => appendNumber(button.textContent)));
operatorButtons.forEach((button) => button.addEventListener("click", () => setOperation(button.textContent)));

function appendNumber(num) {
  if (mainScreen.textContent === "0" || toResetScreen) {
    resetScreen();
  }
  mainScreen.textContent += num;
}

function resetScreen() {
  mainScreen.textContent = "";
  toResetScreen = false;
}

function clearScreen() {
  errorMessage.style = "display: none;";
  mainScreen.textContent = 0;
  mainScreen.style = "color: #000000; font-size: 30px; text-align: end;";
  historyScreen.textContent = "";
  historyScreen.style = "display: visible;";
  firstOperand = "";
  secondOperand = "";
  currentOperation = null;
}

function appendDecimalPoint() {
  // if (toResetScreen) resetScreen();
  if (mainScreen.textContent === "") {
    mainScreen.textContent = "0";
  }
  if (mainScreen.textContent.includes(".")) return;
  mainScreen.textContent += ".";
}

function changeSign() {
  if (mainScreen.textContent > 0) {
    mainScreen.textContent = "-" + mainScreen.textContent;
  } else {
    mainScreen.textContent = mainScreen.textContent * -1;
  }
}

function deleteNumber() {
  if (mainScreen.textContent !== "0") {
    mainScreen.textContent = mainScreen.textContent.toString().slice(0, -1);
  }
}

function setOperation(operator) {
  if (currentOperation !== null) evaluate();
  firstOperand = mainScreen.textContent;
  currentOperation = operator;
  historyScreen.textContent = `${firstOperand} ${currentOperation}`;
  toResetScreen = true;
}

function evaluate() {
  if (currentOperation === null || toResetScreen) return;
  if (currentOperation === "÷" && mainScreen.textContent === "0") {
    errorMessage.style = "display: block; margin: auto;";
    mainScreen.style = "display: none;";
    historyScreen.style = "display: none;";
    return;
  }
  if (currentOperation === "!") {
    mainScreen.textContent = roundResult(operate(currentOperation, firstOperand));
    historyScreen.textContent = `${firstOperand} ${currentOperation} =`;
    return;
  }
  secondOperand = mainScreen.textContent;
  mainScreen.textContent = roundResult(operate(currentOperation, firstOperand, secondOperand));
  historyScreen.textContent = `${firstOperand} ${currentOperation} ${secondOperand} =`;
  currentOperation = null;
}

function roundResult(num) {
  return Math.round(num * 1000) / 1000;
}

function handleKeyboardInput(e) {
  if (e.key >= 0 && e.key <= 9) appendNumber(e.key);
  if (e.key === ".") appendDecimalPoint();
  if (e.key === "=" || e.key === "Enter") evaluate();
  if (e.key === "Backspace") deleteNumber();
  if (e.key === "Escape") clearScreen();
  if (e.key === "+" || e.key === "-" || e.key === "*" || e.key === "/" || e.key === "%" || e.key === "^" || e.key === "!") setOperation(convertOperator(e.key));
}

function convertOperator(keyboardOperator) {
  if (keyboardOperator === "/") return "÷";
  if (keyboardOperator === "*") return "×";
  if (keyboardOperator === "-") return "-";
  if (keyboardOperator === "+") return "+";
  if (keyboardOperator === "%") return "%";
  if (keyboardOperator === "^") return "^";
  if (keyboardOperator === "!") return "!";
}

function add(num1, num2) {
  return num1 + num2;
}

function subtract(num1, num2) {
  return num1 - num2;
}

function multiply(num1, num2) {
  return num1 * num2;
}

function divide(num1, num2) {
  return num1 / num2;
}

function remainder(num1, num2) {
  return num1 % num2;
}

function exponentiate(num1, num2) {
  return num1 ** num2;
}

function factorial(num1) {
  if (num1 === 0) {
    return 1;
  }
  let product = 1;
  for (let i = num1; i > 0; i--) {
    product *= i;
  }
  return product;
}

function operate(operator, num1, num2) {
  num1 = Number(num1);
  num2 = Number(num2);

  switch (operator) {
    case "+":
      return add(num1, num2);
    case "−":
      return subtract(num1, num2);
    case "×":
      return multiply(num1, num2);
    case "÷":
      return divide(num1, num2);
    case "%":
      return remainder(num1, num2);
    case "^":
      return exponentiate(num1, num2);
    case "!":
      return factorial(num1);
    default:
      return null;
  }
}

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  background-image: url(https://i.stack.imgur.com/jGlzr.png);
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

#calculator {
  display: flex;
  padding: 20px;
  justify-content: center;
  background-color: #3b3b3b;
  border: 5px solid black;
  border-radius: 10px;
  align-content: space-between;
  width: 330px;
  flex-wrap: wrap;
  gap: 10px;
  box-shadow: 8px 12px;
  margin: 15px 0;
}

button {
  width: 60px;
  height: 60px;
  font-size: 20px;
  font-weight: bold;
  border-radius: 10%;
  border: 3px solid black;
  box-shadow: 3px 5px black;
  background-color: #8383f47b;
  color: #ffffff;
}

#display {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 260px;
  height: 130px;
  border: 5px solid black;
  border-radius: 10px;
  box-shadow: 5px 8px black;
  background-color: #ffffffaa;
  margin-bottom: 20px;
}

#error-message {
  justify-content: center;
  text-align: center;
  display: none;
  color: #ca1010;
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
}

#main-screen,
#history-screen {
  padding: 10px 15px;
  overflow: auto;
}

#main-screen {
  text-align: end;
  font-size: 30px;
  font-weight: bold;
  overflow-y: hidden;
}

#history-screen {
  font-size: 20px;
  height: 30px;
  overflow-y: auto;
}

#clear,
#backspace {
  width: 130px;
  height: 60px;
  border-radius: 10px;
  box-shadow: 4px 6px black;
  margin-bottom: 5px;
  background-color: #b73c3c;
  color: #ffffff;
}

#equality {
  background-color: #317d31;
}

.operator {
  background-color: #cc9226;
  box-shadow: 3px 5px black;
}

button:hover,
#equality:hover,
#clear:hover,
#backspace:hover,
button:focus,
#equality:focus,
#clear:focus,
#backspace:focus {
  cursor: pointer;
  background-color: #2c9d9d;
  color: black;
  border: 3px solid white;
}

button:focus,
#equality:focus,
#clear:focus,
#backspace:focus {
  background-color: #ffff00;
  transform: translateY(2px);
  box-shadow: 1px 1px black;
}

@media (max-width: 400px) {
  #calculator {
    width: 280px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="icon" href="./imgs/calculator-logo.png">
    <script src="app.js" defer></script>
</head>

<body>
    <div id="calculator">
        <div id="display">
            <p id="error-message"></p>
            <div id="history-screen"></div>
            <div id="main-screen">0</div>
        </div>
        <button id="clear">Clear</button>
        <button id="backspace"><i class="material-icons" style="font-size:28px; margin-top:5px;">backspace</i></button>
        <button class="operator">^</button>
        <button class="operator">!</button>
        <button class="operator">%</button>
        <button class="operator">÷</button>
        <button class="number">7</button>
        <button class="number">8</button>
        <button class="number">9</button>
        <button class="operator">×</button>
        <button class="number">4</button>
        <button class="number">5</button>
        <button class="number">6</button>
        <button class="operator">−</button>
        <button class="number">1</button>
        <button class="number">2</button>
        <button class="number">3</button>
        <button class="operator">+</button>
        <button class="number">0</button>
        <button id="sign-change">+/-</button>
        <button id="decimal-point">.</button>
        <button id="equality">=</button>
    </div>
</body>

</html>