Experience/[Javascript] Calculator

[Javascript] Calculator ④Cancelation

winCow 2021. 4. 28. 16:59

조금씩 계산기다운 기능을 추가하는 중이다.

 

 

1. Cancelation

  if (calculator == "C") {
    numStorage = [];
    givenKeys = [0];
  }

우선 취소 기능을 추가했다. 위 조건문을 saveOrCalc에 입력하여 C 버튼을 누르면 숫자를 저장한 배열과 숫자를 수집하는 배열을 모두 비웠다. 

 

const inputs = document.querySelectorAll('.keyButtons');

let givenKeys = [];
function getValue () {
  if (isNaN(this.value)) {
    saveOrCalc(this.value);
  } else {
    givenKeys.push(this.value);
    givenKeys.splice(-8, givenKeys.length - 7);
  }
}


let numStorage = [];
function saveOrCalc(calculator) {

  numStorage.push(
    {
      value: parseFloat(givenKeys.join('')),
      calculator: calculator
    });
    givenKeys = [];
    
  if (calculator == '=') {
    let result = numStorage[0]['value'];
    for ( index = 1; index < numStorage.length; index++ ) {
      if (numStorage[index - 1]['calculator'] == '+') {
        result = result + numStorage[index]['value'];
      } else if (numStorage[index - 1]['calculator'] == '-') {
        result = result - numStorage[index]['value'];
      } else if (numStorage[index - 1]['calculator'] == '×') {
        result = result * numStorage[index]['value'];
      } else if (numStorage[index - 1]['calculator'] == '÷') {
        result = result / numStorage[index]['value'];
      }
    }
    numStorage = [];
    givenKeys.push(result);
  }
  
  if (calculator == "C") {
    numStorage = [];
    givenKeys = [0];
  }
    
}  

inputs.forEach(input => input.addEventListener('click', getValue));

getValue와 콜백함수인 saveOrCalc는 일단 이런 상태이다. 사칙연산, =, C 버튼까지 만들었고, 나머지 기능도 구현 예정이다.

지난 포스팅에서 개선점으로 첫 번째 계산 결과를 대상으로 다음 계산을 실행하려면 로직을 변경해야 될 것 같다고 작성했는데, 실행이 잘 되길래 다시 생각해 보았다. = 버튼을 누르면 최종적으로 givenKeys가 비워진 후 계산 결과인 result가 push되는데, 이후 연산자를 누르면 이 result값과 연산자가 numStorage에 저장되므로 기존 로직으로 이어서 계산이 가능하다. 다만, 숫자를 누르는 경우가 문제인데, 이 로직대로라면 result에 이어서 숫자가 입력된다. 보통 계산기에서는 이런 경우 값을 초기화하고 새로운 숫자를 받는 경우가 많아서, 이대로 갈 것인지 보통 계산기와 비슷하게 만들 것인지를 생각해 보려고 한다. 

 

 

2. Refactoring - Display

function displayProcess(e) {
  const process = document.querySelector('.process');
  if (this.value == '+' || this.value == '-' || this.value == '×' || this.value == '÷') {
    return ;
  } else {
    process.textContent = givenKeys.join('');
  }
}
inputs.forEach(input => input.addEventListener('click', displayProcess));

Display 기능을 수정했다. 연산자를 누르면 givenKeys를 비우도록 설정했었기 때문에, 화면의 숫자가 지워지는 점이 불편했다. 그래서 사칙연산 기호가 눌러질 때는 아무거도 반환하지 않도록 하여 숫자가 사라지지 않게 하였다.

 

 

3. 추가할 내용

 - 괄호 입력

 - % 입력

 - . 입력

 - +/- 입력

 - 연산자가 눌러지면, result previw에 다음 연산자가 눌러지기 전까지의 계산 결과를 출력하는 기능 구현

 - 키보드로 입력할 수 있는 기능 구현

 

 

4. 문제점

 - result preview를 구현하려고 하니, 계산기 로직 자체가 숫자와 연산자들을 모아 두었다가 =이 입력될 때 한 번에 계산되도록 만들어졌기 때문에 중간 과정을 알 수 없다. 로직 전체를 고쳐야 할지 생각해 봐야 될 것 같다.

 - 화면에 출력되는 값은 문자열이므로, 숫자 앞의 0이 그대로 출력된다.

 - %가 무슨 기능인지 솔직히 잘 모르겠다... 처음에는 그냥 입력한 값의 0.01배를 반환하는 기능인 줄 알았는데 적어도 윈도우 계산기에서는 다른 것 같다. 계산기 공부를 하는 것이 목적은 아니니 그냥 0.01배를 반환하는 기능으로 만들까 한다.