[Html, Css, Javascript] 계산기 만들기 (1)에서 만들었던 계산기와 동작 방식은 같지만
다른 코드로 만든 계산기를 리뷰해보려고 한다.
처음 내가 만든 계산기
✍ 처음 만든 계산기와 다른 점
- 결과 화면에 연산자도 함께 출력하도록 코드를 작성하였었는데 이번 계산기에서는 실제 처럼
연산자는 화면에 보이지 않고 연산자 버튼 클릭 후 숫자 입력하면 이전에 입력해둔 숫자가 지워지도록 해주었다.- grid를 사용하지 않고 display: flex;를 이용하여 정렬을 해주었다.
- 처음 만들었던 계산기보다 파일은 늘어났지만 html은 최대한 간단하게 작성하고 javascript 코드를 더 활용하여 작성해보았다.
✍ 계산기 만들기 개발 순서
1. html로 뼈대 만들기
*결과화면은 input type="text"로 숫자, 연산자, AC 키패드는 button 태그로 만들기
2. css로 정렬 및 꾸미기
3. 숫자 키패드는 onclick을 통해 js 사용
그 외는 addEventListener를 통해서 button click 사용
4. eval 함수를 이용하여 계산 기능 구현하기( = 버튼 눌렀을때)
code reveiw
📌 index.html
1. input type이 text 태그를 하나 만들어준다. (연산 결과화면)
나머지는 input이 아닌 button 태그로 16개 만들어준다.
이때 button 태그를 4개씩, div로 묶어서 만들어 준다.
(이번엔 grid를 이용하지 않고 'display: flex' 를 이용해서 정렬을 할 예정이므로 따로 div로 만들어줌)
2. 숫자 버튼은 onclick을 사용해주었다. 버튼 클릭시 함수를 호출하면서 매개변수를 주도록 만들어주었다.<!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" />
<title>Calculator</title>
</head>
<body>
<form class="formWrapper">
<input type="text" class="display" readonly /><!-- readonly : 읽기 전용 -->
<div class="keypad">
<div>
<button onclick="btn(1)">1</button>
<button onclick="btn(2)">2</button>
<button onclick="btn(3)">3</button>
<button class="operator">+</button>
</div>
<div>
<button onclick="btn(4)">4</button>
<button onclick="btn(5)">5</button>
<button onclick="btn(6)">6</button>
<button class="operator">-</button>
</div>
<div>
<button onclick="btn(7)">7</button>
<button onclick="btn(8)">8</button>
<button onclick="btn(9)">9</button>
<button class="operator">*</button>
</div>
<div>
<button id="crear">AC</button>
<button onclick="btn(0)">0</button>
<button id="result">=</button>
<button class="operator">/</button>
</div>
</div>
</form>
<link rel="stylesheet" href="style.css".css">
<script src="./calculator.js"></script>
</body>
</html>📌 style.css
* {
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.formWrapper {
width: 300px;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #dbf1ff;
border: 5px solid;
border-radius: 25px;
}
.display {
border: 2px solid;
display: inline-block;
border-radius: 10px;
padding-right: 13px;
margin-bottom: 5px;
height: 55px;
width: 250px;
text-align: right;
font-size: 30px;
font-weight: 600;
}
.keypad {
width: 100%;
height: 72%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
button {
font-size: 35px;
font-weight: 600;
border: 2px solid;
border-radius: 10px;
display: inline-block;
height: 60px;
width: 60px;
text-align: center;
}
📌 calculator.js
const display = document.querySelector(".display");
const result = document.querySelector("#result");
const formWrapper = document.querySelector(".formWrapper");
const crear = document.querySelector("#crear");
const operator = document.querySelectorAll("button.operator");
// class를 모두 "operator"로 주었기 때문에 document.querySelectorAll로 가져왔다.
function btn(a) {
display.value += a;
}
/* btn(a) 함수는 숫자나 연산자 버튼을 클릭할 때 해당 버튼의 값을 display에 추가하는 역할을 한다. */
const handlyclick = (event) => {
event.preventDefault();
};
/* handlyclick 함수는 이벤트를 처리하기 위한 콜백 함수이다.
event.preventDefault()를 호출하여 기본 동작을 막는다.*/
let num = []; // 입력하는 모든 값을 저장해준다.
operator.forEach((button) => {
button.addEventListener("click", () => {
num.push(display.value);
num.push(button.textContent);
console.log(num);
display.value = "";
});
});
/* operator가 querySelectorAll로 가져왔기 때문에 배열로 가져오게된다.
그래서 forEach로 반복문을 통해 돌면서 addEventListener를 사용해주었다. */
/* operator 버튼들에 대한 이벤트 처리를 위해 operator.forEach를 사용한다.
각 버튼에 클릭 이벤트를 추가하여 해당 버튼의 값을 num 배열에 추가한다. 그리고 display의 값을 비워준다. */
result.addEventListener("click", () => {
num.push(display.value);
display.value = eval(num.join(""));
});
/* num이 배열로 되어있기 때문에 join을 통해서 ""로 묶어준 후 eval함수로 계산해준다.
result 버튼에 클릭 이벤트를 추가하여 num 배열을 문자열로 합치고 eval 함수를 사용하여 수식을 계산하여
display에 표시한다. */
crear.addEventListener("click", () => {
display.value = "";
num.length = 0;
});
/* crear 버튼에 클릭 이벤트를 추가하여 display의 값을 비우고 num 배열을 비운다. */
formWrapper.addEventListener("submit", handlyclick);
✍ 마지막 코드 정리
1. 사용자가 버튼을 클릭하면 display에 값을 추가하고,
연산자 버튼을 클릭할 때마다 num 배열에 숫자와 연산자를 저장한다.
2. result 버튼을 클릭하면 num 배열의 요소들을 문자열로 합쳐서 수식을 만든다.
3. eval 함수를 사용하여 계산한 결과를 display에 표시한다.
4. crear 버튼을 클릭하면 입력된 값들을 초기화한다.
이를 통해 간단한 계산기를 구현하였다.✍ 아쉬웠던 점?
eval 함수 없이 만들어보고 싶었는데 어려웠다.
다음엔 이번 코드를 유지보수하고 eval 함수도 사용하지 않고 만들어보고 싶다.