계산기 레퍼런스 코드

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

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

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);
}
// TODO : n1과 n2를 operator에 따라 계산하는 함수를 만드세요.
// ex) 입력값이 n1 : '1', operator : '+', n2 : '2' 인 경우, 3이 리턴됩니다.
// 숫자로 그냥 HTML에 넣으면 에러는 안나는데 원하는 방식대로 진행되지 않을 수 있습니다.
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') {
// 아! 저기 콘솔 로그 찍히는 곳에서 무슨 코드를 작성하면 되겠다!
// 숫자 버튼 1번 누르면

  // 숫자 버튼을 누르면, 누른 버튼의 textContent가 앞 자리에 할당이 된다.
  if (firstOperend.textContent !== '0') {
    secondOperend.textContent = buttonContent;
  } else {
    firstOperend.textContent = buttonContent;
  }
  console.log('숫자 ' + buttonContent + ' 버튼');
}

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

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

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);
}

}
});

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

const display = document.querySelector('.calculatordisplay--for-advanced'); // calculatordisplay 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다.
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')) {
// 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';
  // 7 + 0 === 7
  // '7' + '0' === '70'
}
if (action === 'operator') {
  firstNum = display.textContent;
  operatorForAdvanced = buttonContent;
  previousKey = 'operator';
}
if (action === 'decimal') {}
if (action === 'clear') {
  display.textContent = '0';
  //display에 보여진 모습과 / 변수에 저장되는 값
  firstNum = null;
  operatorForAdvanced = null;
  previousNum = null;
}
if (action === 'calculate') {
  if (firstNum) {
    display.textContent  = calculate(firstNum, operatorForAdvanced, display.textContent)
  }
}

}
});