Toy Project - 계산기 만들기(메서드 생성, 버튼 클릭시 호출)

JS

class Calculator {
  constructor(displayElement) {
    this.displayElement = displayElement;
    this.displayContent = "";
  }
  appendNumber(number) {
    this.displayContent += number;
  }

  updateDisplay() {
    this.displayElement.value = this.displayContent;
  }
}

const buttons = document.querySelectorAll("button");
const displayElement = document.querySelector("input");

const calculator = new Calculator(displayElement);

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    switch (button.dataset.type) {
      case "operator":
        console.log('operator')
        break;
      case "ac":
        console.log("ac");
        break;
      case "equals":
        console.log("equals");
        break;
      default:
        calculator.appendNumber(button.innerText);
        calculator.updateDisplay();
        break;
    }
  });
});

• 버튼을 클릭할때마다 [displayContent] 속성에 [number]가 추가되고 [input]에도 표시되도록 [appendNumber],[updateDisplay] 메서드 추가한다.
• [swhich]문의 [default]에서 추가한 메서드 호출

class Calculator {
  constructor(displayElement) {
    this.displayElement = displayElement;
    this.displayContent = "";
  }
  appendNumber(number) {
    this.displayContent += number;
  }

  appendOperator(operator) {
    this.displayContent += operator;
  }

  updateDisplay() {
    this.displayElement.value = this.displayContent;
  }
}

const buttons = document.querySelectorAll("button");
const displayElement = document.querySelector("input");

const calculator = new Calculator(displayElement);

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    switch (button.dataset.type) {
      case "operator":
        calculator.appendOperator(button.innerText);
        calculator.updateDisplay();
        break;
      case "ac":
        console.log("ac");
        break;
      case "equals":
        console.log("equals");
        break;
      default:
        calculator.appendNumber(button.innerText);
        calculator.updateDisplay();
        break;
    }
  });
});

• [operator]도 마찬가지로 추가해준다.

class Calculator {
  //...
  clear() {
    this.displayContent = "";
    this.displayElement.value = 0;
  //...
  }
}

const buttons = document.querySelectorAll("button");
const displayElement = document.querySelector("input");

const calculator = new Calculator(displayElement);

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    switch (button.dataset.type) {
	  //...
      case "ac":
        calculator.clear();
        break;
	  //...
    }
  });
});

• AC버튼도 마찬가지로 추가해준다.