Javascript 계산기 만들기
🔢 자바스크립트로 계산기 만들기
eval() 함수를 이용하여 계산기를 만듭니다.
난이도 ⭐
예제 Retro Calculator with JS
기능 정의
- 버튼 클릭 > 클릭 이벤트가 발생한 값 저장
- 숫자
- 연산 +, -, /, *
- 양수/음수 +/-
- 소수점 .
- = 버튼 클릭
- 저장된 값들을 연산
- 연산된 값들을 출력
- A/C 버튼은 현재 값과 저장된 값 모두 삭제, C 버튼은 현재 입력된 값만 삭제하는 기능
기본 구조
테이블 태그를 사용하는 방법도 있지만 모던 웹 방식에 맞추어 flexbox로 레이아웃을 설계했습니다.
기능이 같은 버튼들은 공통 클래스명을 줍니다.
<div class="viewer">
<button class="btn all-clear">AC</button>
<button class="btn clear">C</button>
<button class="btn sign">+/-</button>
<button class="btn symbol divide">/</button>
<button class="btn num">7</button>
<button class="btn num">8</button>
<button class="btn num">9</button>
<button class="btn symbol times">*</button>
<button class="btn num">4</button>
<button class="btn num">5</button>
<button class="btn num">6</button>
<button class="btn symbol minus">-</button>
<button class="btn num">1</button>
<button class="btn num">2</button>
<button class="btn num">3</button>
<button class="btn symbol plus">+</button>
<button class="btn num">0</button>
<button class="btn dot">.</button>
<button class="btn equal">=</button>
</div>
스타일링은 window 계산기 버전, 아이폰 버전 등 원하는 느낌으로 하시면 됩니다.
Step 1. 공통 변수 선언
모든 클릭 이벤트에 사용될 변수입니다. currentValue는 숫자든 연산 부호든 내가 클릭하는 값을 담습니다.
store는 클릭한 것들이 계속 담겨집니다. A/C버튼을 누르지 않는 한 사라지지 않습니다.
const currentValue = document.querySelector('.current-value');
const store = document.querySelector('.store');Step 2. 숫자 버튼 클릭
숫자 버튼을 클릭하고 값을 볼 수 있도록 처리해 봅니다.
배열 메소드(map)를 사용하기 위해 숫자 버튼의 유사배열을 진짜 배열에 담아 주고, number를 클릭할 때 작동할 setNum 함수를 작성합니다.
const numbers = Array.from(document.querySelectorAll('.num'));
numbers.map(number => {
number.addEventListener('click', setNum);
})
function setNum() {
currentValue.innerText += this.innerText;
}
Array.from() : 유사배열을 진짜 배열로 바꿔 줍니다.
Step 3. 연산 버튼 클릭
숫자 버튼처럼 배열메소드 안에 클릭 이벤트를 작성해 줍니다. 클리어 함수는 간단하므로 마지막 순서에 다뤄 보겠습니다.
const symbols = Array.from(document.querySelectorAll('.symbol'));
symbols.map(symbol => {
symbol.addEventListener('click', setSymbol);
})
function setSymbol() {
if (currentValue.innerText !== '') { //현재 값에 아무도 없다면
if (store.innerText === '') { // 첫 입력이라면
store.innerText = currentValue.innerText + ' ' + this.innerText
} else { // 첫 입력이 아닐 경우
store.innerText = `${store.innerText} ${currentValue.innerText} ${this.innerText}`
}
}
clearValue();
}
우선 연산까지만 하고 계산 결과값을 구해 보겠습니다.
Step 4. = 버튼 클릭하여 결과값 구하기
자바스크립트는 데이터를 string으로 저장합니다. string 타입의 값들끼리 계산해 주기 위해 eval() 함수를 사용했습니다.
이제 숫자끼리 더하거나 빼보시면 결과값을 확인할 수 있습니다.
const equal = document.querySelector('.equal');
equal.addEventListener('click', getTotal);
function getTotal() {
if(currentValue.innerText !== '') {
currentValue.innerText = eval(store.innerText + currentValue.innerText);
}
clearStore();
}
eval(string)
그러나 eval() 은 보안 이슈가 있기에 지양해야 합니다. 다음에는 eval() 함수 없이 계산기 만들기도 올리겠습니다.
Step 5. +/- 와 . 클릭
코드 길이를 줄이기 위해 if문 말고 삼항연산자를 사용했습니다.
const dot = document.querySelector('.dot');
const sign = document.querySelector('.sign');
dot.addEventListener('click', setDot);
sign.addEventListener('click', setSign);
function setDot() {
currentValue.innerText.indexOf('.') === -1 ?
currentValue.innerText = `${currentValue.innerText}.` :
false;
}
function setSign() {
currentValue.innerText.indexOf('-') === -1 ?
currentValue.innerText = `-${currentValue.innerText}` :
currentValue.innerText = currentValue.innerText.replace('-','');
}
Step 6. 마지막 Clear 함수!
클리어 버튼만 클릭하면 현재 값만 지워줍니다. AC(all clear) 버튼은 현재값, 저장된 값 모두 삭제하여 초기화 상태로 만듭니다.
const clear = document.querySelector('.clear');
const allClear = document.querySelector('.all-clear');
clear.addEventListener('click', clearValue);
allClear.addEventListener('click', function(){
clearValue();
clearStore();
});
function clearValue() {
currentValue.innerText = '';
}
function clearStore() {
store.innerText = '';
}
Step 7. 추가적으로 하면 좋은 것
6번째까지 하시면 계산기는 완성입니다. 하지만 좀 더 디테일을 위해 추가하면 좋은 내용이 있습니다.
고정 너비로 되어 있기 때문에 숫자 갯수가 증가하면 디자인을 벗어납니다.
그래서 setNum() 함수에 length 제한을 두면 더 좋겠죠?
25자가 넘어가면 알럿이 뜨도록 작성했습니다.
function setNum() {
currentValue.innerText.length < 25 ?
currentValue.innerText += this.innerText :
alert('Oooops🤦 Can you re-enter it within the maximum input range?');
}