S1. 계산기 기능 구현하기

노션으로 보기

Advanced Challenge test

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;
  if(operator === '+'){
  result = Number(n1) + Number(n2);
}   else if(operator === '-'){
  result = Number(n1) - Number(n2);
}  else if(operator === '*'){
  result = Number(n1) * Number(n2);
}  else if(operator === '/'){
  result = Number(n1) / Number(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')) {
    console.log(target);
 
    if (action === 'number') {
      if(firstOperend.innerText !== '0'){
        secondOperend.innerText = buttonContent;
      } else {
        firstOperend.innerText = buttonContent;
       }
     }
    }

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

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

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

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

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

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' && operatorForAdvanced ===''){ //1)최초숫자가 0이고, 연산자를 누르지 않았을때
        display.textContent = buttonContent;
        firstNum = display.textContent;
      } else if(display.textContent !== '0' && operatorForAdvanced ==='') { //2)최초 숫자가 0이 아니고, 연산자를 누르지 않았을 때,
        display.textContent = display.textContent + buttonContent;
        firstNum = display.textContent;
      } else if(display.textContent !== '0' && operatorForAdvanced !=='') {  //3)최초 숫자가 0이 아니고 연산자를 눌렀을때,
        display.textContent = buttonContent; 
        previousNum = display.textContent;
       //3)최초 숫자가 0이 아니고 연산자를 눌렀을때,
       //3-1)앞전에 누른 key가 연산자일때, ex)'3+ '까지 누른 상태
       //3-2)앞전에 누른 key가 연산자가 아닐때, ex)3+17을 위해 '3+1 '까지 누른 상태
       //추가로 누른 연산자가 없기 때문에 previousKey는 할당하지 않음.
      }
    }

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

   // if (action === 'decimal') {
  // display.TextContent = decimalNum;
  //  }

    if (action === 'clear') {
      display.textContent = '0';
      firstNum = '';
      operatorForAdvanced = '';
      previousKey = 'clear';
      previousNum = '';
    }
    if (action === 'calculate') {
      display.textContent =calculate(firstNum, operatorForAdvanced, previousNum);
    }
  }
});

Nightmare test

문제

1. 3, * , 3, enter, enter, enter ⇒ 243
2. 3, enter, enter, enter, * , 3 ⇒ 9
3. 3, enter, enter, enter, -, 3, enter ⇒ 0
4. 3, enter, enter, enter, +, 3, enter ⇒ 6
5. 3, enter, enter, enter, /, 3, enter ⇒ 1
6. 3, * , enter ⇒ 9
7. 3, -, enter ⇒ 0

   if (action === 'number') {
      if(display.textContent === '0' && operatorForAdvanced ===''){ //1)최초숫자가 0이고, 연산자를 누르지 않았을때
        display.textContent = buttonContent;
        firstNum = display.textContent;
      } else if(display.textContent !== '0' && operatorForAdvanced ==='') { //2)최초 숫자가 0이 아니고, 연산자를 누르지 않았을 때,
        display.textContent = display.textContent + buttonContent;
        firstNum = display.textContent;
      } else if(display.textContent !== '0' && operatorForAdvanced !=='') {  //3)최초 숫자가 0이 아니고 연산자를 눌렀을때,
        display.textContent = buttonContent; 
        previousNum = display.textContent;
       //3)최초 숫자가 0이 아니고 연산자를 눌렀을때,
       //3-1)앞전에 누른 key가 연산자일때, ex)'3+ '까지 누른 상태
       //3-2)앞전에 누른 key가 연산자가 아닐때, ex)3+17을 위해 '3+1 '까지 누른 상태
       //추가로 누른 연산자가 없기 때문에 previousKey는 할당하지 않음.
      }

} else if(display.textContent !== '0' && operatorForAdvanced !=='' && previousKey ===  operatorForAdvanced) {
        display.textContent = buttonContent;
        previousKey = display.textContent;
        previousNum = display.textContent;
      } else if(display.textContent !== '0' && operatorForAdvanced !=='' && previousKey !== operatorForAdvanced) {
        display.textContent = display.textContent + buttonContent;
        previousNum = display.textContent;
      }

} else if(display.textContent !== '0' && operatorForAdvanced !=='') { //3)최초 숫자가 0이 아니고 연산자를 눌렀을때,
        if(previousKey === operatorForAdvanced) {//3-1)앞전에 누른 key가 연산자일때, ex)'3+ '까지 누른 상태
            display.textContent = buttonContent;
            previousKey = display.textContent;
            previousNum = display.textContent;
        } else if(previousKey !== operatorForAdvanced) {  //3-2)앞전에 누른 key가 연산자가 아닐때, ex)3+17을 위해 '3+1 '까지 누른 상태
          display.textContent = display.textContent + buttonContent;
          previousNum = display.textContent;
         } //추가로 누른 연산자가 없기 때문에 previousKey는 할당하지 않음.
      }
    }