CODE KATA 🧗‍♂️

vanilla JS 를 통해 계산기를 구현하라

요구조건

clear button (C) 를 구현하라
Basic operator ( + , - , * , / ) 를 구현하라
연속적인 계산 (ex.2 x 2 x 2 x 2 x 2) 을 구현하라

해결과정

html

calculator라는 class를 가진 div의 내부에, status class의 div와 각각의 숫자를 innerText로 가진 number class와 각각의 기호를 innerText로 가진 operator를 button으로 선언했다. equal과 clear를 class로 갖는 button도 생성해주었다.

css

가장 먼저 .calculator의 안에 grid속성을 지정하여 내부의 버튼이 정렬되도록 하였다.

.calculator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
  background-color: black;
}

이후 각각의 속성에 따라 특성을 지정해주었는데, 그중 주목할만한 것은 .zero이다. 여타 버튼과는 다르게, 해당 버튼은 가로로 두칸을 차지하는데, 해당 특성을 grid-column: auto / span 2;을 통해 지정해주었다. 또한, 모든 버튼에 대해서 클릭시에 하이라이트 되는 현상을 없애기 위해서

*:focus {
  outline: none;
}

을 지정하여 주었고, 각 버튼이 클릭 되었을때, 아래로 살짝 눌리는 느낌과 색상의 변화를 주기 위하여 각각의 클래스:active를 지정하여, transform: translateY(1px);와 background-color:를 각각의 클래스와 어울리는 색상으로 바꾸어 주었다.

JS

이제 본격적인 요구조건을 충족시키는 계산기를 만들어보겠다. 가장 먼저,

const status = document.querySelector(".status");
const clear = document.querySelector(".clear");
const number = document.querySelectorAll(".number");
const operator = document.querySelectorAll(".operator");
const equal = document.querySelector(".equal");

를 통해 필요한 요소들을 미리 선언해주고, 사용할 변수도 선언해주었다.

let num1 = 0;
let num2 = 0;
let num = 0;
let wasOp = 0;
let op1 = "";
let op = "";
let opCount = 0;
let result = 0;

페이지의 로드와 함께 실행되는 함수 init()에서는 각각의 숫자를 innerText로 갖고있는 number와 연산자를 innerText로 갖고있는 operator에 대해서,

    number.forEach(function(Item) {
        Item.addEventListener("click",handleNumber);
    });
    operator.forEach(function(Item) {
        Item.addEventListener("click", handleOperator);
    });

를 forEach()를 통해 실행하여 각각 클릭에 대해 동작하는 함수를 선언해주고, clear 버튼과 equal 버튼에 대해서도 클릭에 대해 동작하는 함수를 선언해주었다.

    clear.addEventListener("click", handleClear);
    equal.addEventListener("click",handleEqual);

handleNumber(event)

각각의 number에 대한 클릭에 반응하는 handleNumber()에는 event.target.innerText를 통해 해당 버튼의 숫자를 value로서 저장해주고, 해당 value를 디스플레이의 상황에 따라 변화하도록 status.innerText를 now로 저장해주었다. 이후에 0이 입력되었는데 숫자를 입력시 03과 같이 입력되는 것을 방지하기 위해 now !== 0인 조건문을 동해 else에는 status.innerText를 value로 바뀌도록 했고, 조건문에 해당되는 경우에는 직전의 입력이 연산자였는지 여부를 1로 표현하는 wasOp를 조건문으로 하여 만약 이전의 입력이 조건문이었던 경우 status.innerText를 바로 value로 바꾸어주고, wasOp값을 0으로 바꿔주었다. 아닌 경우, status.innerText = status.innerText + value를 통해 이전의 값의 다음 값으로 이어지도록 하였다.

handleClear(event)

clear 기능을 하는 clear 버튼의 클릭에 반응하는 handleClear함수는 result,wasOp,opCount를 모두 0으로 바꿔준 후에, status.innerText 또한 0으로 바꾸어 출력해주었다.

handleOperator(event)

operator를 클릭한 것에 대한 반응하는 handleOperator함수는 가장 먼저 이전 입력이 연산자였음을 의미하는 wasOp를 1로 지정하고, clear가 눌리지 않고 몇번의 연산자가 입력되었는지 여부를 저장하는 opCount의 값에 따라 다른 결과를 출력하도록 하였다. 먼저 처음으로 입력된 연산자인 경우, num1에 parseInt(status.innerText)를 저장하고, op1에는 event.target.innerText를 저장해준 후에 다음 입력을 기다리도록 하였다. opCount가 1인 경우에는, num2를 parseInt(status.innerText)로 저장하고, op를 event.target.innerText로 저장해준 후에, op1의 값이 +,-,*,/ 중 어떤 것이냐에 따라 result를 해당 연산자로 num1과 num2로 계산한 결과값을 저장하도록 하였다. opCount가 2 이상인 경우에는 공통적으로 num에 status.innerText를 저장해주고, result와 num을 op에 따라 계산한 결과를 result로 최신화 시켜주고, 그 후에 event.target.innerText를 op로 최신화 시켜주었다. opCount에 따른 조건문을 거친 이후에는 공통적으로 opCount = opCount + 1을 해주어 같은 조건을 중복으로 통과하지 않도록 처리하였다.

handleEqual(event)

equal (=) 버튼을 클릭한 이벤트에 대한 반응으로 동작하는 handleEqual 함수는 기본적으로 handleOperator의 동작과 같은 메커니즘으로 동작한다. 차이점이 있다면, opCount가 0인 경우에는 특정 연산을 진행할 수 없기 때문에 handleClear 함수가 작동하게 했고, 이외의 연선에서는 op를 저장하는 것을 제외하고는 같은 방식으로 작동하게 하였다.

---

실행결과