5일차 TIL 210308

1. querySelector 와 textContent 를 활용해여 텍스트 조회하고 바꿀 수 있다.

2. 지금까지 배운 내용 정리

• 문제 해결을 위해 컴퓨터가 “기억”하고 있어야 하는 정보를 변수를 활용하여 저장해뒀다가, 다시 사용할 수 있다.
• 기억하고있어야 하는 정보가 변경되어야 하는 경우, 새로운 정보를 변수에 저장할 수 있다.
• 문제 해결을 위해 함수를 선언하고, 호출하고, 결과값을 리턴할 수 있다.
• 함수를 만드는 것은 문제 해결을 위한 논리(알고리즘)를 컴퓨터가 이해할 수 있게 코드를 작성하는 것임을 이해할 수 있다.
• 😸오늘 새로 배운 개념
  • 조건문의 상태가 변하지 않으면 그 조건문이 계속 빙빙 돌게 된다.

else if(previousKey === 'operator' ){
        display.textContent = buttonContent; 
        previousKey = 'Number1' // 이 코드가 없으면 해당 반복문이 계속 빙빙 돈다,,,
      } 

3. 계산기 만들기 - 하드코딩 해보자

// ! intermediate, advanced test를 위한 코드입니다. 도전하신다면 주석을 해제하세요.
const display = document.querySelector('.calculator__display--intermediate'); // calculator__display 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
let firstNum, intermediateOperator, previousKey, previousNum;

buttons.addEventListener('click', function (event) {
  // 버튼을 눌렀을 때 작동하는 함수입니다.
  // ! 여기서부터 intermetiate & advanced 과제룰 풀어주세요.

  const target = event.target; // 클릭된 HTML 엘리먼트의 정보가 저장되어 있습니다.
  const action = target.classList[0]; // 클릭된 HTML 엘리먼트에 클레스 정보를 가져옵니다.
  const buttonContent = target.textContent; // 클릭된 HTML 엘리먼트의 텍스트 정보를 가져옵니다.
  const buttonContainerArray = buttons.children;
  // ! 위 코드는 수정하지 마세요.

  if (target.matches('button')) {
    for (let i = 0; i < buttonContainerArray.length; i++) {
      const childrenArray = buttonContainerArray[i].children;
      for (let j = 0; j < childrenArray.length; j++) {
        childrenArray[j].classList.remove('isPressed');
      }
    }

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

    if (action === 'operator') {
      target.classList.add('isPressed');
      if (firstNum && intermediateOperator && previousKey !== 'operator' && previousKey !== 'calculate') {
        display.textContent = calculate(firstNum, intermediateOperator, display.textContent);
      }
      firstNum = display.textContent;
      intermediateOperator = buttonContent;
      previousKey = 'operator';
    }

    if (action === 'decimal') {
      if (!display.textContent.includes('.') && previousKey !== 'operator') {
        display.textContent = display.textContent + '.';
      } else if (previousKey === 'operator') {
        display.textContent = '0.';
      }
      previousKey = 'decimal';
    }

    if (action === 'clear') {
      firstNum = undefined;
      intermediateOperator = undefined;
      previousNum = undefined;
      previousKey = 'clear';
      display.textContent = '0';
    }

    if (action === 'calculate') {
      if (firstNum) {
        if (previousKey === 'calculate') {
          display.textContent = calculate(display.textContent, intermediateOperator, previousNum);
        } else {
          previousNum = display.textContent;
          display.textContent = calculate(firstNum, intermediateOperator, display.textContent);
        }
      }
      previousKey = 'calculate';
    }
  }
});

4. 페어로 부터 들은 조언!

논리는 맞는데 2프로 부족하다는 조언을 들었다. 추후에 논리를 써내려갈때 먼저 수도코드를 작성 한 후에 코딩을 해보자. 더 적극적으로 페어 프로그램에 참여하기. 모를땐 확실히 모른다고 하기. 이해한척 하지말자.

5. 더 알고싶은 내용

css 로 operator 를 눌렀을때 class 추가되어 시각상 표시가 되는것까진 구현했는데,operator 를 누른뒤 enter 를 누르면 다시 해제하게 하고싶은데 그것은 추가로 알아보아야 겠다.

 if (action === 'operator') {
      intermediateOperator = buttonContent;
      previousKey = 'operator';
      target.classList.add('ispressed')
    }