[SEB FE] section 1 unit 7 - 계산기 기능구현하기 1️⃣ 후기

 

 

 

 

진짜 너무 힘들었고 아주 많이 애먹었다..

 

 

const calculator = document.querySelector('.calculator'); // calculator 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const buttons = calculator.querySelector('.calculator__buttons'); // calculator__keys 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.

const firstOperend = document.querySelector('.calculator__operend--left'); // calculator__operend--left 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const operator = document.querySelector('.calculator__operator'); // calculator__operator 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const secondOperend = document.querySelector('.calculator__operend--right'); // calculator__operend--right 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
const calculatedResult = document.querySelector('.calculator__result'); // calculator__result 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.

function calculate(n1, operator, n2) {
  let result = 0;
  n1 = +n1;
  n2 = +n2;
  // TODO : n1과 n2를 operator에 따라 계산하는 함수를 만드세요.
  // ex) 입력값이 n1 : '1', operator : '+', n2 : '2' 인 경우, 3이 리턴됩니다.
  if (operator === '+'){
    result = n1 + n2
  } else if (operator === '-'){
    result = n1 - n2
  } else if (operator === '*'){
    result = n1 * n2
  } else if (operator === '/'){
    result = n1 / n2
  }
  return String(result);
}

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') {
      // 그리고 버튼의 클레스가 number이면
      // 아래 코드가 작동됩니다.
      console.log('숫자 ' + buttonContent + ' 버튼');
      if (firstOperend.textContent === '0'){
        firstOperend.textContent = buttonContent;
      } else {
        secondOperend.textContent = buttonContent        
      }
    }

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

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

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

    if (action === 'calculate') {
      console.log('계산 버튼');
      calculatedResult.textContent = calculate (parseInt(firstOperend.textContent), operator.textContent, parseInt(secondOperend.textContent))
    }
  }
});


// ! Advanced Challenge test와 Nightmare test를 위해서는 아래 주석을 해제하세요.

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 (display.textContent === '0' && previousKey !== 'operator'){
        display.textContent = buttonContent
        firstNum = display.textContent
      } else if (display.textContent !== '0' && 
				 previousKey !== 'operator' && 
				 previousNum === undefined){
        display.textContent += buttonContent  
        firstNum = display.textContent   
      } else if (previousKey === 'operator' && display.textContent !== '0'){
        display.textContent = 0;
        display.textContent = buttonContent
        previousNum = display.textContent
      } else {
        display.textContent += buttonContent
        previousNum = display.textContent
      }
      previousKey = 'number'
    }

    if (action === 'operator') {
      console.log('연산자 ' + buttonContent + ' 버튼');
      
      if(firstNum && operatorForAdvanced && previousKey !== 'operator' && 
		 previousKey !== 'calculate') {
        display.textContent = calculate(firstNum, operatorForAdvanced, previousNum)
      }
      
      
      // 변수 operator에 버튼의 텍스트(연산자 기호, 여기서는 '*')를 할당합니다.
      operatorForAdvanced = buttonContent; 
      firstNum = parseFloat(display.textContent);
      previousKey = 'operator';
    }    
    
    if (action === 'decimal') {
        if (!display.textContent.includes('.') && previousKey !== 'operator'){
          display.textContent = display.textContent + '.';
        } else if(previousKey === 'operator') {
          display.textContent = '0.' 
          previousNum = '0.'
        }
        previousKey = 'decimal'

    }
    if (action === 'clear') {
      firstNum = undefined                    // 1. 계산기에 입력되었던 첫 번째 값
      operatorForAdvanced = undefined        // 2. 연산자
      previousNum = undefined                 // 3. 계산기에 입력되었던 두 번째 값
      display.textContent = 0;       // 4. 화면
      console.log('초기화 버튼');
      previousKey = 'clear';
    }


    if (action === 'calculate') {
      if (operatorForAdvanced === undefined && previousKey === 'number'){
        display.textContent = firstNum
      }
      else if (previousNum === undefined){
        display.textContent = calculate(display.textContent, operatorForAdvanced, display.textContent);
      } 
      else if (previousKey === 'calculate' && operatorForAdvanced){
        display.textContent = calculate(display.textContent, operatorForAdvanced, previousNum);
      } 

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

      console.log(firstNum, operatorForAdvanced, previousNum);
    }
  
  }
});

일단 초반에 advanced 진행하는데에는 페어분이 너무 잘 도와주셔서 간신히 성공했다.

근데 설명도 넘 잘해주셔서 진짜 도움이 많이 됨.. ㅠㅠ

그랬는데 이제 nightmare는 각자 해보기로 하고 혼자서 하는데

소숫점, 엔터키, 연산자를 눌렀는데 다음이 안 나와... 왜 ㅠ_ㅠ 

숫자 누르고 엔터ㄱ키를 누르면 자꾸 0이 나와..

변수가 자꾸 바뀌는데 이거 다 변수 할당할 수 있나?

진짜 뇌가 녹을 거 같은 기분 느끼면서... 일단은 후기만 적어본다..

 

이 부분을 계속 통과하지 못했다.

연산자 값이 없는데 바로 이전이 숫자였을 때. 라는 간단한 조건문이었는데

여기서 그냥 계속 헤매가지고 .. ㅠ ㅠ 힌트나 다른 사람이 한 걸 봐도, 내가 여태 변수 지정해온거며 

그런게 다 달라가지고 내 거에 대입해보지 못하고 결국 내가 풀어내야 했음....

 

회고는 주말에 제대로 해야지

어쨋든 모두 통과~!! 뿌듯하다 뿌듯해 ㅠ_ㅠ