D-9

9일차 시작은 계산기 구현이다. 기초만 배웠는데 이게 되는지 의문을 가지면서 시작을 했다.

🔍 계산기 구현

코드를 짜기 전에 먼저 메모장을 키고 계산기 동작을 생각나는대로 적어보았다.

화면에 숫자 버튼을 입력해 숫자가 보인다.
연산기호는 보이지 않고 동작만 한다.
다시 숫자 버튼을 입력해 숫자가 보인다.
=을 눌러 결과를 보여준다.

일어나는 순서대로 적어보았다. 세세한 주의 사항들도 적어보자.

연산자가 누적되어야한다. (10 이상의 수 표현을 위함)
연산자는 0으로 시작하면 안된다. (EX - 0700)
결과값에 연산자와 숫자를 입력해 추가 계산작업을 한다.

buttons.addEventListener('click', function (event) { 
//버튼을 눌렀을 때 작동하는 함수이다
}

이 함수안에 number,operator,clear,calculate 로 나누어 써보자

📌 number

if (action === 'number') {  //action => number시
      if(display.textContent === '0' || previousKey === 'operator'){ // 만약 '0'이거나 previousKey 가 operator 일 때
        display.textContent = buttonContent;  // 클릭된 html 엘리먼트의 텍스트 정보를 가져온다.
      } 
      else if(display.textContent !== '0'){  // 만약 '0'이 아닐 때
        display.textContent += buttonContent; // 그 뒤에 클릭된 html 엘리먼트의 텍스트 정보를 가져온다.
      } 
      if(previousKey){
        display.textContent === buttonContent;
      }
      previousKey = 'number'
      }

📌 operator

if (action === 'operator') { // action => operator시
      firstNum = display.textContent // 첫 숫자
      operatorForAdvanced = buttonContent; // 연산자 입력
      previousKey = 'operator'; // previousKey에 operator 할당 (방금 뭘 눌렀는지)
    }

📌 clear

if (action === 'clear') {  // action => clear시
        display.textContent = '0'; // 화면을 '0'으로 초기화
        firstNum = undefined; // firstNum를 ''으로 초기화
        operatorForAdvanced = undefined; // operatorForAdvanced를 ''로 초기화 
        previousNum = undefined; // previousNum를 ''로 초기화
        previousKey = undefined; // previousKey를 ''로 초기화
    }

📌 calculate

if (action === 'calculate') { // action => calculate시
      if(operatorForAdvanced){
        previousNum = display.textContent
        display.textContent = calculate (firstNum, operatorForAdvanced, display.textContent); // (firstNum)  (operatorForAdvanced) (display.textContent) = calculate
        previousKey = 'calculate'; //직전에 입력한 키에 저장
      }
    }

시간이 모자랄 줄 알았다. 하지만 막상 시작하고 술술 이어갈 수 있었다.
특히 많은 조건이 들어가는 number 부분을 작성하면 그 뒤는 연관되어있는 부분이라 생각을하며 코드를 써내려갔다.
자바스크립트를 하면서 너무 어렵게만 느껴졌던게
오늘 계산기 구현을 통해 좀 더 가까워 진 것 같아 뿌듯했다.