간단한 계산기 만들기

준성·2023년 5월 1일

계산기 부트캠프

간단한 계산기 만들기

계산기의 기본원리를 이용해 계산기를 만들어보자

먼저 생각해야하는 일 💡

HTML , CSS를 이용하여 계산기 작업
JS를 이용하여 버튼의 기능구현
숫자버튼을 입력 (연달아 입력가능해야함)
연산자버튼을 입력하면 다음 숫자를 입력할 수 있게 넘어가야함
AC버튼을 누른 값들을 초기화 시켜야한다
소수점을 누를때 그 값도 제대로 적용이 되어야 한다.
계산버튼을 누를때 계산이 되어야한다.

계산기 초안작업

계산기

HTML, CSS를 사용하여 간단한 숫자 배치와 스타일을 적용하였다.

JS 기능구현

버튼에 클릭 이벤트를 구현하여 각 버튼을 눌렀을 떄 그 버튼의 역할이 맞다면
그 기능을 하게끔 설정하였다. 각 버튼의 역할을 쪼개서 알아보자

1. 숫자버튼을 눌렀을 때

if (action === 'number') {
      if (display.textContent === '0' || previousKey === 'operator' || previousKey === 'calculate') {
        display.textContent = buttonContent;
      } else {
        display.textContent = display.textContent + buttonContent;
      }
      previousKey = 'number';
    }

현재 누른 버튼이 숫자버튼이면, 이전 버튼이 연산자 나 계산 버튼이거나, 현재 표시된 값이 0 이면

표시되는 값을 누른 버튼의 값으로 변경한다. 그렇지 않으면 현재 표시된 값에 누른 버튼의 값을 추가한다.

그리고 이전의 버튼의 값은 숫자 로 설정한다.

2. 연산자버튼을 눌렀을 때

if (action === 'operator') {
  target.classList.add('isPressed');
  if (firstNum && operatorForAdvanced && previousKey !== 'operator' && previousKey !== 'calculate') {
    display.textContent = calculate(firstNum, operatorForAdvanced, display.textContent);
  }
  firstNum = display.textContent;
  operatorForAdvanced = buttonContent;
  previousKey = 'operator';
}

현재 누른 버튼이 연산자 버튼이면, 현재 누른 버튼에 isPressd 클래스를 추가한다.

만약 firstNum 과 operatorForAdvanced 값이 있고, 이전 버튼이 연산자 or 계산 버튼이 아니면

firstNum 과 operatorForAdvanced , 그리고 현재 표시된 값을 계산하여 표시한다.

firstNum 을 현재 표시된 값으로, operatorForAdvanced를 누른 버튼의 값으로 설정하고,

이전 버튼의 값은 연산자 로 설정한다.

3. 소수점버튼을 눌렀을 때

if (action === 'decimal') {
  if (!display.textContent.includes('.') && previousKey !== 'operator') {
    display.textContent = display.textContent + '.';
  } else if (previousKey === 'operator') {
    display.textContent = '0.';
  }
  previousKey = 'decimal';
}

현재 누른 버튼이 소수점 버튼이면, 현재 표시된 값에 . 를 추가한다.

만약 이전 버튼이 연산자 버튼이라면 0. 을 표시한다

이전 버튼의 값은 소수점 으로 설정한다.

4. AC버튼을 눌렀을 때

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

clear 버튼을 클릭한 경우, 변수들은 초기화하고 화면에 0 을 출력한다.

5. Enter버튼을 눌렀을 때

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';
    }

Enter 버튼을 클릭한 경우 이전에 입력된 숫자와 연산자, 그리고 현재 입력된 숫자를 이용해 계산을 수행한다.

이 때, 이전에 Enter 버튼을 눌렀다면 현재 입력된 숫자와 연산자는 무시하고 이전에 계산된 결과값과 현재

입력된 연산자를 이용해 계산한다. 그렇지 않은 경우 이전에 입력된 숫자와 연산자 그리고 현재 입력된

숫자를 이용해 계산을 수행하고 이전에 계산된 결과값을 저장한다.

종합

각각의 기능을 조건문으로 걸어 그 해당사항이 된다면 작동하게끔 설정을 했다.
사실 조금 어려웠던 부분은 previousKey의 값을 저장하여 어떤 버튼인지를
설정하여 그 변수가 어떤 버튼일때 뭘 해야하는지를 계속해서 바꾸기 때문에
많이 헷갈렸다 간단한 계산기였다고 생각했지만 전체적으로 코드를 보아도
이해하기는 쉬웠지만 막상 혼자서 그 코드를 작성할 떄 어려움이 컸던 것 같다.
또 다른 과제가 주어졌을 때 활용 할 수 있을것 같다는 생각에 블로그에 정리를 해본다.