코드스테이츠 2주차 계산기

1. Bare Minimum Requirements

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

1. 연산 시 script.js의 calculate 함수를 활용할 수 있도록 함수 calculate를 작성합니다.
2. 처음 숫자 버튼을 클릭했을 때, 첫 번째 화면에 누른 숫자가 나타나야 합니다.
3. 숫자 버튼과 연산자 버튼을 순서대로 클릭했을 때, 첫 번째 화면는 숫자, 두 번째 화면에는 연산자가 나타나야 합니다.
4. 숫자 버튼, 연산자 버튼, 숫자 버튼을 순서대로 클릭했을 때, 화면에 숫자, 연산자, 순자가 순서대로 나타나야 합니다.
5. 숫자 버튼, 연산자 버튼, 숫자 버튼, 엔터 버튼을 순서대로 클릭했을 때, 화면에 숫자, 연산자, 숫자, =, 연산 결과가 순서대로 나타나야 합니다.
6. AC 버튼을 클릭했을 때, 화면에 0, +, 0, =, 0 이 순서대로 나타나야 합니다.

해설

연산시 필요한 calculate 함수

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

계산기 작동

 if (target.matches('button')) {
    // 클릭된 HTML 엘리먼트가 button이면
    if (action === 'number') {
      // 그리고 버튼의 클레스가 number이면    
      if(firstOperend.textContent !== '0'){
        secondOperend.textContent = buttonContent;
      }else{
        firstOperend.textContent = buttonContent;
      }
    }
// 버튼을 클릭하면 화면에 출력되는 코드 
// 숫자를 처음입력하는 경우, 그 이후에 입력하는 경우를 생각해 줘야 한다
// 첫번째 입력칸이 0이 아니라면 두번째 칸에 버튼 컨텐츠를 넣어주고
// 첫번째 칸이 0이라면 첫번째 칸에 누른 버튼 컨텐츠를 넣어준다
   
    if (action === 'operator') {
      operator.textContent = buttonContent;
    }

    if (action === 'clear') {
      firstOperend.textContent = 0;
      secondOperend.textContent = 0;
      calculatedResult.textContent = 0;
      operator.textContent = '+';
    }

    if (action === 'calculate') {
      let n1 = Number(firstOperend.textContent)
      let n2 = Number(secondOperend.textContent)
      let operator_n1n2 = operator.textContent
      calculatedResult.textContent = calculate(n1, operator_n1n2, n2)
    }
  }
});