계산기구현하기

기본적인 계산 기능 구현하기

연산 시 script.js의 calculate 함수를 활용할 수 있도록 함수 calculate를 작성.
화면의 첫 번째 칸에 숫자 나타내기
숫자 버튼과 연산자 버튼을 순서대로 클릭했을 때, 첫 번째 화면는 숫자, 두 번째 화면에는 연산자가 나타나야 한다.
숫자 버튼, 연산자 버튼, 숫자 버튼을 순서대로 클릭했을 때, 화면에 숫자, 연산자, 순자가 순서대로 나타나야 한다.
숫자 버튼, 연산자 버튼, 숫자 버튼, 엔터 버튼을 순서대로 클릭했을 때, 화면에 숫자, 연산자, 숫자, =, 연산 결과가 순서대로 나타나야 한다.
화면 상의 값을 초기화하기
AC 버튼을 클릭했을 때, 화면에 0, +, 0, =, 0 이 순서대로 나타나야 한다.

계산기가 작동할 수 있도록 함수 구현

function calculate(n1, operator, n2) {
  let result = 0;
  if (operator === "+") {
    result = Number(n1) + Number(n2);
  } else if (operator === "-") {
    result = Number(n1) - Number(n2);
  } else if (operator === "*") {
    result = Number(n1) * Number(n2);
  } else if (operator === "/") {
    result = Number(n1) / Number(n2);
  }
  return String(result);
}

계산기 버튼을 눌렀을 때 작동하는 함수 구현

if (target.matches("button")) {
    if (action === "number") {
      if (
        display.textContent === "0" ||
        previousKey === "operator" ||
        previousKey === "calculate"
      ) {
        display.textContent = buttonContent;
      } else {
        display.textContent = display.textContent + buttonContent;
      }
      previousKey = "number";
    }
    if (action === "operator") {
      if (
        firstNum &&
        operatorForAdvanced &&
        previousKey !== "operator" &&
        previousKey !== "calculate"
      ) {
        display.textContent = calculate(
          firstNum,
          operatorForAdvanced,
          previousNum
        );
      }
      operatorForAdvanced = buttonContent;
      firstNum = display.textContent;
      previousKey = "operator";
    }

    if (action === "decimal") {
    }

    if (action === "clear") {
      display.textContent = "0";
      operatorForAdvanced = undefined;
      previousKey = "clear";
      firstNum = undefined;
      previousNum = undefined;
    }

    if (action === "calculate") {
      if (firstNum) {
        if (previousKey === "calculate") {
          display.textContent = calculate(
            display.textContent,
            operatorForAdvanced,
            previousNum
          );
        } else {
          previousNum = display.textContent;
          display.textContent = calculate(
            firstNum,
            operatorForAdvanced,
            display.textContent
          );
        }
      }
      previousKey = "calculate";
    }
  }
});

---

2023-02-23

계산기를 구현해보면서
새로운것들을 많이 배웠다. 어렵고도 신기하다.
배울게 아직 많이 남아있으니 더더더 노력해야겠다!