JS 계산기 목업

주석 있는 코드

주석 없는 코드는 하단에 있다. 동일한 코드이다.

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;
  // TODO : n1과 n2를 operator에 따라 계산하는 함수를 만드세요.
  // ex) 입력값이 n1 : '1', operator : '+', n2 : '2' 인 경우, 3이 리턴됩니다.
  // 문자열로 입력된 n1과 n2를 숫자형으로 변환한다.
  const num1 = parseFloat(n1);
  const num2 = parseFloat(n2);
  // operator가 '+'인 경우
  if (operator === "+") {
    // result에 num1과 num2의 합을 할당한다.
    result = num1 + num2;
  }
  // operator가 '-'인 경우
  else if (operator === "-") {
    // result에 num1과 num2의 차를 할당한다.
    result = num1 - num2;
  }
  // operator가 '*'인 경우
  else if (operator === "*") {
    // result에 num1과 num2의 곱을 할당한다.
    result = num1 * num2;
  }
  // operator가 '/'인 경우
  else if (operator === "/") {
    // result에 num1을 num2으로 나눈 몫을 반올림하여 할당한다.
    result = num1 / num2;
  }
  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 + " 버튼");
      // 첫번째 숫자 칸에 0이 아닌 숫자가 있는지 확인한다.
      if (firstOperend.textContent === "0") {
        // 없다면 첫번째 숫자 칸의 TextContent에 할당한다.
        firstOperend.textContent = buttonContent;
      }
      // 있다면 두번째 숫자 칸의 TextContent에 할당한다.
      else secondOperend.textContent = buttonContent;
    }
    if (action === "operator") {
      console.log("연산자 " + buttonContent + " 버튼");
    }
    if (action === "decimal") {
      console.log("소수점 버튼");
    }
    if (action === "clear") {
      console.log("초기화 버튼");
      // 첫번째 숫자 칸의 textContent에 '0'을 할당한다.
      firstOperend.textContent = "0";
      // 두번째 숫자 칸의 textContent에 '0'을 할당한다.
      secondOperend.textContent = "0";
      // 결과 숫자 칸의 textContent에 '0'을 할당한다.
      calculatedResult.textContent = "0";
    }
    if (action === "calculate") {
      // 결과 숫자 칸의 textContent에 함수 calculate()의 반환값을 할당한다.
      calculatedResult.textContent = calculate(
        firstOperend.textContent,
        operator.textContent,
        secondOperend.textContent
      );
      // 콘솔창에 계산 버튼을 눌렀다고 띄운다.
      console.log("계산 버튼");
    }
  }
});


// ! 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 (previousKey === "calculate") {
        firstNum = undefined;
        operatorForAdvanced = undefined;
        previousNum = undefined;
      }
      // 화면이 '0'이거나 직전에 연산자 또는 계산 버튼을 눌렀다면 display의 textContent에 buttonContent를 할당한다.
      if (display.textContent === "0" || previousKey === "operator" || previousKey === "calculate") {
        display.textContent = buttonContent;
      }
      // 아니라면 display의 textContent에 buttonContent 문자열을 더하여 할당한다.
      else {
        display.textContent = display.textContent.concat(buttonContent);
      }
      // 누른 버튼이 숫자라고 previousKey를 기록한다.
      previousKey = "number";
      // 어떤 숫자를 눌렀는지 메세지를 띄운다.
      console.log("숫자 " + buttonContent + " 버튼");
    }

    if (action === "operator") {
      if (firstNum && previousKey !== "operator" && previousKey !== "calculate") {
        display.textContent = calculate(firstNum, operatorForAdvanced, display.textContent);
      }
      // 화면의 숫자를 첫번째 숫자로 저장한다.
      firstNum = display.textContent;
      // 연산자를 저장한다.
      operatorForAdvanced = buttonContent;
      // 누른 버튼이 연산자라고 previousKey를 기록한다.
      previousKey = "operator";
      // 어떤 연산자를 눌렀는지 메세지를 띄운다.
      console.log(`연산자 ${buttonContent} 버튼`);
    }
    
    if (action === "decimal") {
      // 직전에 계산버튼을 누르거나 연산버튼을 눌렀다면
      if (["calculate", "operator"].includes(previousKey))
        // 화면의 숫자에 '0.'을 할당한다.
        display.textContent = "0.";
      // 화면의 마지막 문자가 '.'이 아니면
      else if (!display.textContent.includes(".")) {
        // 화면의 숫자에 '.' 문자열을 더한다.
        display.textContent += ".";
      }
      // 누른 버튼이 소수점이라고 previousKey를 기록한다.
      previousKey = "decimal";
      // 소수점을 눌렀다고 메세지를 띄운다.
      console.log(`소수점 버튼`);
    }
    
    if (action === "clear") {
      // 첫번째 숫자, 연산자, 두번째 숫자를 undefined로 초기화한다.
      firstNum = undefined;
      operatorForAdvanced = undefined;
      previousNum = undefined;
      // display의 textContent를 '0'으로 초기화한다.
      display.textContent = "0";
      // 누른 버튼이 초기화 버튼이라고 previousKey를 기록한다.
      previousKey = "clear";
      // 콘솔창에 초기화 버튼을 눌렀다고 메세지를 띄운다.
      console.log("초기화 버튼");
    }

    if (action === "calculate") {
      // enter를 눌렀을 때 첫번째 숫자, 연산자가 모두 있지 않으면 계산하지 않는다.
      if (!firstNum) return;
      // 직전에 연산버튼을 눌렀다면
      if (previousKey === "operator") {
        // 첫번째 숫자와 화면의 숫자를 연산한다.
        display.textContent = calculate(firstNum, operatorForAdvanced, display.textContent);
      }
      // 직전에 계산버튼을 눌렀다면
      else if (previousKey === "calculate") {
        // 결과를 첫번째 숫자로 하여 한번 더 연산을 한다.
        display.textContent = calculate(display.textContent, operatorForAdvanced, previousNum);
      } else {
        // 현재 화면의 숫자를 두번째 숫자에 할당한다.
        previousNum = display.textContent;
        // 디스플레이의 textContent에 calculate()의 반환값을 할당한다.
        display.textContent = calculate(firstNum, operatorForAdvanced, display.textContent);
      }
      // 계산버튼을 눌렀다고 previousKey를 기록한다.
      previousKey = "calculate";
      // 계산 버튼을 눌렀다고 메세지를 띄운다.
      console.log("계산 버튼");
    }
  }
});

주석 없는 코드

const calculator = document.querySelector(".calculator");
const buttons = calculator.querySelector(".calculator__buttons"); 
const firstOperend = document.querySelector(".calculator__operend--left"); 
const operator = document.querySelector(".calculator__operator"); 
const secondOperend = document.querySelector(".calculator__operend--right");
const calculatedResult = document.querySelector(".calculator__result");

function calculate(n1, operator, n2) {
  let result = 0;
  const num1 = parseFloat(n1);
  const num2 = parseFloat(n2);
  
  if (operator === "+") {
    result = num1 + num2;
  } else if (operator === "-") {
    result = num1 - num2;
  } else if (operator === "*") {
    result = num1 * num2;
  } else if (operator === "/") {
    result = num1 / num2;
  }
  return String(result);
}

buttons.addEventListener("click", function (event) {
  const target = event.target; 
  const action = target.classList[0]; 
  const buttonContent = target.textContent;
  
  if (target.matches("button")) {
    if (action === "number") {
      if (firstOperend.textContent === "0") {
        firstOperend.textContent = buttonContent;
      } else secondOperend.textContent = buttonContent;
      console.log("숫자 " + buttonContent + " 버튼");
    }

    if (action === "operator") {
      console.log("연산자 " + buttonContent + " 버튼");
    }
    if (action === "decimal") {
      console.log("소수점 버튼");
    }

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

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

const display = document.querySelector(".calculator__display--for-advanced"); 
let firstNum, operatorForAdvanced, previousKey, previousNum;

buttons.addEventListener("click", function (event) {
  const target = event.target; 
  const action = target.classList[0];
  const buttonContent = target.textContent;

  if (target.matches("button")) {
    if (action === "number") {
      if (previousKey === "calculate") {
        firstNum = undefined;
        operatorForAdvanced = undefined;
        previousNum = undefined;
      }
      if (display.textContent === "0" || previousKey === "operator" || previousKey === "calculate") {
        display.textContent = buttonContent;
      } else {
        display.textContent = display.textContent.concat(buttonContent);
      }
      previousKey = "number";
      console.log("숫자 " + buttonContent + " 버튼");
    }

    if (action === "operator") {
      if (firstNum && previousKey !== "operator" && previousKey !== "calculate") {
        display.textContent = calculate(firstNum, operatorForAdvanced, display.textContent);
      }
      firstNum = display.textContent;
      operatorForAdvanced = buttonContent;
      previousKey = "operator";
      console.log(`연산자 ${buttonContent} 버튼`);
    }

    if (action === "decimal") {
      if (["calculate", "operator"].includes(previousKey)) display.textContent = "0.";
      else if (!display.textContent.includes(".")) {
        display.textContent += ".";
      }
      previousKey = "decimal";
      console.log(`소수점 버튼`);
    }

    if (action === "clear") {
      firstNum = undefined;
      operatorForAdvanced = undefined;
      previousNum = undefined;
      display.textContent = "0";
      previousKey = "clear";
      console.log("초기화 버튼");
    }

    if (action === "calculate") {
      if (!firstNum) return;
      if (previousKey === "operator") {
        display.textContent = calculate(firstNum, operatorForAdvanced, display.textContent);
      } else if (previousKey === "calculate") {
        display.textContent = calculate(display.textContent, operatorForAdvanced, previousNum);
      } else {
        previousNum = display.textContent;
        display.textContent = calculate(firstNum, operatorForAdvanced, display.textContent);
      }
      previousKey = "calculate";
      console.log("계산 버튼");
    }
  }
});