Section1 / Unit6 : 웹앱 만들기(계산기 구현하기)

코드스테이츠 수업 9일차!

오늘은 계산기 구현하는 시간이었다.

연산자에 따라 함수만드는 건 Number( )사용하는 거 제외하고 어렵지 않았지만

0 + 0 = 0 에서 누르는 숫자가 출력되게끔 하는 것부터가 아주 큰 관건이었다.

 

 

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

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

  if (target.matches('button')) {
    // TODO : 계산기가 작동할 수 있도록 아래 코드를 수정하세요. 작성되어 있는 조건문과 console.log를 활용하시면 쉽게 문제를 풀 수 있습니다.
    // 클릭된 HTML 엘리먼트가 button이면
    if (action === 'number') {
      console.log('숫자 ' + buttonContent + ' 버튼');
    }

    if (action === 'operator') {
      console.log('연산자 ' + buttonContent + ' 버튼');
    }

    if (action === 'decimal') {
      // console.log('소수점 버튼');
    }

    if (action === 'clear') {
      // console.log('초기화 버튼');
    }

    if (action === 'calculate') {
    }
  }
});

이게 기본으로 주어진 함수였다.(bare minimum과제)

조건문을 수정하면 출력이 되게끔 해야했다.

if (action === 'number') {
	// 아! 저기 콘솔 로그 찍히는 곳에서 무슨 코드를 작성하면 되겠다!
	// 숫자 버튼 1번 누르면 
	// 숫자 버튼을 누르면, 누른 버튼의 textContent가 앞 자리에 할당이 된다.
    if (firstOperend.textContent !== '0') {
      secondOperend.textContent = buttonContent;
     } else {
      firstOperend.textContent = buttonContent;
     }
     console.log('숫자 ' + buttonContent + ' 버튼');
   }

이 조건문들에서 textContent라는 속성을 사용했고 나머지 조건문에도 설정하면 완성이다.

*textContent : 노드가 가지고 있는 콘텐츠를 텍스트로 조회하거나 설정한다.

if (action === 'operator') {
    console.log('연산자 ' + buttonContent + ' 버튼');
    operator.textContent = buttonContent;
   }

if (action === 'clear') {
    firstOperend.textContent = '0';
    operator.textContent = '+';
    secondOperend.textContent = '0'
    calculatedResult.textContent = '0';
    // console.log('초기화 버튼');
   }

if (action === 'calculate') {
    calculatedResult.textContent = 
    calculate(firstOperend.textContent, operator.textContent, secondOperend.textContent);
   }

여기까지가 bare minimum 과제!

---

여기서부터는 advanced 과제다 어려워서 손 못댐..

결과를 보면 이해가 되는데 여기까지 생각해내는 게 아직 너무 어렵다

아래의 코드가 기본틀이었고 역시나 수정해서 출력되게 하는 거였다

const display = document.querySelector('.calculator__display--for-advanced'); // calculator__display 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
let firstNum, operatorForAdvanced, previousKey, previousNum;

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

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

  // ! 여기서부터 Advanced Challenge & Nightmare 과제룰 풀어주세요.
  if (target.matches('button')) {
    if (action === 'number') {}
    if (action === 'operator') {}
    if (action === 'decimal') {}
    if (action === 'clear') {}
    if (action === 'calculate') {}
  }

});

// 7000 * 5
// 7
// 70
// 700
// 7000 -> firstNum 
// display => 7000
// 7000 * -> operator
// 7000 * 5 -> 5 display
// display => 5
// Enter => 계산이 되고, 35000
    
if (action === 'number') {
	if (display.textContent === '0' || previousKey === "operator") {
		display.textContent = buttonContent;
      } else {
        display.textContent = display.textContent + buttonContent;
      }
      //화면에 숫자가 스택될 수 있게 적용
      previousKey = 'number';
      //previousKey : 현재 상태를 저장해줄 공간
    }
if (action === 'operator') {
	firstNum = display.textContent;
    operatorForAdvanced = buttonContent;
    previousKey = 'operator';
    //previousKey = 'number';와 비슷한 느낌
    
    if (operatorForAdvanced === buttonContent || display.textContent === "0") {
      display.textContent = buttonContent;
    }
    }
if (action === 'decimal') {}
if (action === 'clear') {
    display.textContent = "0";
    displayNumber = null;
    firstNum = null;
    previousKey = null;
    previousNum = null;
    previousKey = "clear";
    }
if (action === 'calculate') {
    if (firstNum) {
      display.textContent  = calculate(firstNum, operatorForAdvanced, display.textContent)
    }
    }