HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<script src="calculator.js" defer></script>
<title>Calculator</title>
</head>
<body>
<div class="container">
<input type="text" value="000" disabled>
<div class="button">
<button class="ac" data-type="ac">AC</button>
<button data-type="operator">÷</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button data-type="operator">×</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button data-type="operator">-</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button data-type="operator">+</button>
<button class="zero">0</button>
<button>.</button>
<button data-type="equals">=</button>
</div>
</div>
- ac버튼과 연산 버튼 등호 버튼과 넘버 버튼은 각각 따로 작동하므로 data-type을 각자 정해준다.
JS
class Calculator {
constructor(displayElement) {
this.displayElement = displayElement;
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:
console.log("number");
break;
}
});
});
- Calculator class를 만들어주고 인스턴스를 만들어준다. displayElement는 displayElement, displayContent 빈값을 넣어준다.
- querySelectorAll로 button의 값을 buttons로 받아주고, querySelector input태그들의 값을 displayElement에 받아준다.
- calculator 선언.
- forEach와 addEventListener를 사용해서 모든 버튼에 클릭 이벤트를 연결하고,switch문으로 각각의 경우에 따라 console.log하는 값을 다르게 설정해준다.
