오늘 배운 것

• 쿼리셀렉터의 역할
• 계산기 만들기

쿼리셀렉터의 역할

쿼리셀렉터는 특정 class나 id를 제한하지 않고, css선택자를 사용하여 요소를 찾는다.
쿼리셀렉터는 입력한 선택자와 일치하는 첫번째 엘리먼트를 반환하기 때문에, 여러 요소를 찾으려면 querySelectorAll()로 찾는 것이 편하다.

계산기 만들기

사실 bare minimum을 만드는 것 까지는 어렵지 않았다.
테스트코드의 오류메세지를 하나하나 잡는 방식으로 코드를 짜다 보니 쉽게 할 수 있었다.
같은 방법으로 코딩을 하니 Intermediate Requirements까지도 그렇게 어렵다고는 느끼지 못했다.
(실제로 2시간만에 Intermediate까지 완료했다)
하지만 Advanced Challenge는 5시간이 걸렸는데, 테스트코드가 요구하는 것들을 위해 하나하나 예외처리하다보니 로직이 꼬이기도 하고 아예 어디서부터 로직을 짜야 할 지 구상하기도 어려운 부분이 있었다.

onst display = document.querySelector('.calculator__display--intermediate'); // calculator__display 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
let firstNum, intermediateOperator, previousKey, previousNum;
let pressTarget;
buttons.addEventListener('click', function (event) {
  if(pressTarget){
    pressTarget.classList.remove('isPressed');
    pressTarget = '';
  }
  // 버튼을 눌렀을 때 작동하는 함수입니다.
  const target = event.target; // 클릭된 HTML 엘리먼트의 정보가 저장되어 있습니다.
  const action = target.classList[0]; // 클릭된 HTML 엘리먼트에 클레스 정보를 가져옵니다.
  const buttonContent = target.textContent; // 클릭된 HTML 엘리먼트의 텍스트 정보를 가져옵니다.
  // ! 위 코드는 수정하지 마세요.
  // ! 여기서부터 intermetiate & advanced 과제룰 풀어주세요.
  if (target.matches('button')) {
    // NUMBER
    if (action === 'number') {
      // previous key가 오퍼레이터 혹은 display textcontent가 0일때
      if(display.textContent === '0' || previousKey === 'calculate' || !previousKey){
        firstNum = '';
        intermediateOperator = '';
        previousKey = '';
        previousNum = '';
        display.textContent = buttonContent;
      }else if(previousKey === 'operator'){ // 오퍼레이터가 이전에 눌린 경우
        display.textContent = buttonContent;
      }else{ // 이전에 눌린 키가 넘버인 경우
        display.textContent += buttonContent;
      }
    }
    // OPERATOR
    if (action === 'operator') {
      if (firstNum === ''){
        firstNum = display.textContent; // fistNum 할당
      }else if(intermediateOperator && previousKey !== 'operator'){
        firstNum = calculate(firstNum, intermediateOperator, display.textContent)
      }
      intermediateOperator = buttonContent; //operator 할당
      pressTarget = target;
      target.classList.add('isPressed');
    }
    // DECIMAL
    if (action === 'decimal') { // 소수점이 현재 디스플레이에 포함되지 않은 경우
      if(!display.textContent.includes(buttonContent)){
        display.textContent += buttonContent;
      }
      if(previousKey === 'operator'){ // 이전 키가 operator인 경우 (second number를 받기 시작하는 경우)
        display.textContent = 0 + buttonContent;
      }
    }
    // CLEAR
    if (action === 'clear') {
      display.textContent = 0;
      firstNum = '';
      intermediateOperator = '';
      previousKey = '';
      previousNum = '';
    }
    // CALCULATE
    if (action === 'calculate') {
      let resultNum;
      if(!firstNum){ // first number만 누르고 엔터를 눌렀을 경우
        resultNum = display.textContent;
      }else if(previousKey === 'operator'){
        previousNum = display.textContent;
        resultNum = calculate(firstNum, intermediateOperator, firstNum);
      }else if(previousKey === 'number'){ // 첫 연선
        previousNum = display.textContent;
        resultNum = calculate(firstNum, intermediateOperator, previousNum);
      }else{ // 첫 연산 이후 계속 연속해서 엔터를 누를 경우
        resultNum = calculate(display.textContent, intermediateOperator, previousNum);
      }
      display.textContent = resultNum;
    }
    previousKey = action;
  }
}
);