계산기 기능 구현하기

전체보다는 의사코드를 중점으로, 어려웠던 부분만 정리

hint : 이전에 입력한 키의 값을 변수로 선언하고 작성하기(previousKey에 이전에 누른 키 값을 할당)

숫자를 눌렀을 때
// 처음 버튼을 누르는 경우, 연산자를 누르고 난 다음, 엔터키를 눌러 계산을 끝낸 이후에는 화면에 있는 값을 지워주고 숫자를 입력하기 시작해야 하기 때문에

    if(display.textContent === '0' || previousKey === 'operator' || previousKey === 'calculator') {// 일 경우에는
      display.textContent = buttonContent;
      // 화면에 있는 숫자를 입력된 숫자로 변경한다.
      //buttonContent는 target.textContent로 클릭된 엘리먼트의 텍스트 정보를 가져온다.
    }else{
      display.textContent += buttonContent;
      // 그 외에는 화면에 입력하는 값을 추가한다.
	}

연산자를 눌렀을 때

  if(operatorForAdvanced && firstNum && previousKey !== 'operator' && previousKey !== 'calculate'){
     display.textContent = calculate(previousNum, operatorForAdvanced, display.textContent);
  }

이 부분이 중요한데, 숫자 + 연산자 + 숫자를 누른 후 다시 연산자를 누르면 기존에 입력된 값이 계산된 값이 나와야 한다.
즉, '1', '+', '2', '+'를 누르면 3이 표시되어야 한다.
이를 위해 저장된 연산자가 존재할 때, 저장된 첫번째 숫자가 존재할 때 연산자를 누르면 calculate함수를 호출해야한다.
previousKey가 operator와 calculator면 안되는 이유는 previousKey가 operator일 때 연산자를 누르면 '1', '+', '+'를 누를 경우 계산이 진행되어 버리기 때문이고, calculator면 엔터를 누른 직후 연산자를 누르면 추가적으로 계산이 되어버리기 때문이다.

  firstNum = display.textContent // 입력이 완료된 첫번째 숫자를 저장한다
  operatorForAdvanced = buttonContent // 입력된 연산자를 저장한다

소수점을 눌렀을 때

  if(previousKey === 'number' && !display.textContent.includes('.'))
    // 이전에 입력한 값이 숫자이고 이미 입력된 '.'이 없다면 .을 입력해주어야 한다.
  if(display.textContent === '0' || previousKey === 'operator')
    // 또한, 아무런 값이 입력되지 않은 상태나, 연산자를 누른 직후 .이 눌리면 0.이 나오도록 해야한다.

초기화를 눌렀을 때
// 모든 값을 초기화 해주면 된다

엔터를 눌렀을 때

  if(previousNum)
    // 저장된 firstNum 값이 있을 때만 계산을 실행시켜야한다.
  if(previousKey !== 'calculate'){
    //엔터를 반복해서 누른다면 계산이 반복해서 진행되어야 하기 때문에 엔터를 처음 눌렀을 경우
      firstNum = display.textContent;
    // 두번째 인자로 넣을 숫자를 따로 저장해야한다
      display.textContent = calculate(firstNum, operatorForAdvanced, display.textContent);
    // 첫번째 엔터이기 때문에 계산은 이전에 입력된 첫번째 숫자에 화면에 입력된 숫자를 연산자로 계산한다
  }else{
      display.textContent = calculate(display.textContent, operatorForAdvanced, firstNum);
    // 엔터가 반복적으로 입력되면 화면에 표시된 값에 저장된 두번째 값으로 계산을 진행해야 한다
  }

++ 버튼 눌렀을 때 작동하는 for문

    for (let i = 0; i < buttonContainerArray.length; i++) {
      // button__row의 수 만큼 반복
      const childrenArray = buttonContainerArray[i].children;
      // 실질적인 button요소가 calculator__buttons의 자식요소인 button__row의 아래에 위치해 있기 때문에
      // button__row자식요소(number, operator, clear...etc가 포함되어 있음)를 함수로 지정
      for (let j = 0; j < childrenArray.length; j++) {
        // button__row의 자식 요소의 수 만큼 반복
        childrenArray[j].classList.remove('isPressed');
        // button__row의 자식 요소 에 'isPressed' 클래스를 삭제
      }
    }
	target.classList.add('isPressed')
// isPressed 클래스를 추가함
// 연산자를 눌렀을 때 작동하도록 해당 위치에 작성하며,
// 위에서부터 코드가 진행되기 때문에
// 기존에 존재하던 'isPressed' 클래스가 for문에 의해 삭제되고 진행된다

계산기 사용법을 알았으니, 다음 목표는 내가 디자인한 계산기에 계산기능을 추가하는 것과 계산된 내역을 출력되는 화면 위쪽에 표시하는 것이다.
다음에 한 번 시도하고 블로그에 추가해야지😁