JavaScript_ 간단한 웹앱 만들기 (계산기_user_flow)

목표!

• 숫자 버튼을 누르고 화면에 숫자를 입력하기
• 숫자 버튼을 눌렀을 때, 계산기의 화면에 숫자가 보여야 합니다.
  숫자 버튼을 여러 번 눌렀을 때, 계산기 화면에 숫자가 이어 붙여져야(concatenation) 합니다.
• 연산자 버튼 동작 시키기
• 연산자 버튼을 눌렀을 때, 계산기 화면에 보이는 숫자를 따로 저장하고 계산할 준비를 해야 합니다.
• Enter 버튼, AC 버튼 동작 시키기
• Enter 버튼을 눌렀을 때, 이전에 저장한 숫자와 계산기 화면에 보이는 숫자를 계산한 결과를 화면에 보여줘야 합니다.
• 두 정수의 사칙 연산을 수행하는 calculate 함수를 작성합니다.
• AC 버튼을 누르면 초기 상태로 돌아갈 수 있어야 합니다.
• 미리 작성된 SpecRunner.html 파일을 열고, Requirements을 전부 구현했는지 테스트를 돌려서 확인합니다.

계산기 기본 함수

function calculate(n1, operator, n2) {
    let result = 0;
    // 입력값이 n1 : '1', operator : '+', n2 : '2' 인 경우, 3이 리턴됩니다.\
    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);
  }

1. 계산기 화면이 0일 때 숫자를 누르면 누른 숫자가 화면에 출력 되어야 한다.
2. 숫자를 여러 번 누르면 화면에 숫자가 이어져 붙어야 한다

if (target.matches('button')) {
    if (action === 'number') {
      if(display.textContent === '0'){
        display.textContent = buttonContent;
      }else{
        display.textContent = display.textContent + buttonContent;
      }
    

1. 연산자 버튼을 눌렀을 때 변수 operatioForAdvanced에 버튼 콘텐츠를 할당

if (action === 'operator') {
      firstNum = display.textContent;
      operatorForAdvanced = buttonContent; // 연산자에 누르는 버튼을 저장
      previousKey = 'operator';
    }

1. 연산자를 누른 다음에 누르는 숫자 버튼을 화면에 출력해야 하기 때문에 action number로 돌아가 조건을 다시 달아준다

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

마지막으로 처음 만들었던 계산기 함수를 호출해주면

if (action === 'calculate') {
          display.textContent = calculate(firstNum, operatorForAdvanced, display.textContent);
      }