웹 개발을 시작하면서 가장 먼저 도전해볼 만한 프로젝트 중 하나는 바로 계산기입니다. 간단해 보이지만, 계산기를 구현하는 과정에서 자바스크립트의 기본 개념부터 이벤트 처리, DOM 조작까지 다양한 기술을 자연스럽게 익힐 수 있습니다. 이번 글에서는 HTML, CSS, 자바스크립트를 활용하여 기본적인 기능을 갖춘 계산기를 만들어보겠습니다.
전체 코드는 GitHub에서 보실 수 있습니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calculator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="calculator-container">
<div class="calculator-three-btns">
<div class="calculator-btn red"></div>
<div class="calculator-btn yellow"></div>
<div class="calculator-btn green"></div>
<span>© Ju-MINJAE</span>
</div>
<section class="display"><p>0</p></section>
<button class="button function delete">←</button>
<section class="buttons">
<button class="button function">C</button>
<button class="button function">+/-</button>
<button class="button function">%</button>
<button class="button operator">/</button>
<button class="button number">7</button>
<button class="button number">8</button>
<button class="button number">9</button>
<button class="button operator">X</button>
<button class="button number">4</button>
<button class="button number">5</button>
<button class="button number">6</button>
<button class="button operator">-</button>
<button class="button number">1</button>
<button class="button number">2</button>
<button class="button number">3</button>
<button class="button operator">+</button>
<button class="button number zero">0</button>
<button class="button function">.</button>
<button class="button function">=</button>
</section>
</div>
<script src="./script.js"></script>
</body>
</html>calculator-container: 계산기 전체를 감싸는 컨테이너 입니다.calculator-three-btns: Mac OS 상단 버튼을 모방한 디자인 요소입니다. 디자인외 기능은 없습니다.display: 계산기의 결과를 표시하는 영역입니다.button: 모든 버튼에 공통적으로 적용되는 클래스입니다.number: 숫자 버튼에 적용되는 클래스입니다.operator: 연산자 버튼에 적용되는 클래스입니다.function: 기능 버튼에 적용되는 클래스입니다.delete: 백스페이스에 추가로 적용되는 클래스입니다.
JavaScript
const p = document.querySelector('p');
const buttons = document.querySelectorAll('.button');계산기의 디스플레이 영역과 모든 버튼 요소를 선택하여 각각
p와buttons변수에 할당합니다.
let curNum = '0';
let firstOperand = null;
let secondOperand = null;
let operator = null;현재 값, 두 개의 피연산자 그리고 연산자를 저장할 변수를 생성합니다.
buttons.forEach((btn) => {
btn.addEventListener('click', (e) => {
const clickedNum = e.target.textContent;
console.log(`Clicked: ${clickedNum}`);
}배열의 고차함수
forEach를 사용하여 모든 버튼에click이벤트를 생성합니다.
if (btn.classList.contains('number')) {
if (curNum === '0') curNum = clickedNum;
else curNum += clickedNum;
p.textContent = curNum;
}
number클래스를 가진 버튼을 클릭하면 현재 값을 나타내는p에 표시합니다.
if (clickedNum === '.') {
if (!curNum.includes('.')) curNum += '.';
}소수점 버튼을 클릭하면 현재 숫자에 소수점을 추가합니다. 이미 소수점이 있다면 추가되지 않습니다.
if (clickedNum === 'C') {
curNum = '0';
firstOperand = null;
secondOperand = null;
operator = null;
p.textContent = curNum;
return;
}
C버튼을 클릭하면 모든 입력과 계산을 초기화합니다.
if (clickedNum === '←') {
if (curNum.length > 1) {
curNum = curNum.slice(0, -1);
} else {
curNum = '0';
}
p.textContent = curNum;
return;
}
←버튼을 클릭하면 마지막 입력된 숫자를 삭제합니다. 현재 입력된 숫자의 길이가 1이하일 경우 현재 값을 0으로 설정합니다.
if (btn.classList.contains('operator')) {
if (operator && curNum === '0') {
operator = clickedNum;
return;
}
if (operator && firstOperand !== null) {
secondOperand = curNum;
console.log(secondOperand);
const result = calculate(firstOperand, operator, secondOperand);
console.log(result);
p.textContent = result;
firstOperand = result;
curNum = '0';
} else {
firstOperand = curNum;
curNum = '0';
}
operator = clickedNum;
// console.log(`First Operand: ${firstOperand}, Operator: ${operator}`);
return;
}연산자 버튼을 클릭하면 현재 입력된 숫자와 선택된 연산자를 기반으로 계산을 준비합니다.
if (clickedNum === '=') {
if (operator && firstOperand !== null) {
secondOperand = curNum;
const result = calculate(firstOperand, operator, secondOperand);
p.textContent = result;
firstOperand = result;
secondOperand = null;
operator = null;
curNum = result;
}
return;
}
=버튼을 클릭하면 현재 설정된 연산자와 피연산자를 기반으로 계산을 수행하고 결과를 표시합니다.
if (clickedNum === '+/-' && curNum !== '0') {
curNum = curNum * -1;
p.textContent = curNum;
return;
}
+/-버튼을 클릭하면 현재 입력된 숫자의 부호를 전환합니다.
if (clickedNum === '%' && curNum !== '0') {
curNum = String(Number(curNum) / 100);
p.textContent = curNum;
return;
}
%버튼을 클릭하면 현재 입력된 숫자를 퍼센트로 변환합니다.
function calculate(num1, op, num2) {
num1 = Number(num1);
num2 = Number(num2);
let result;
switch (op) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case 'X':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
default:
console.log('ERROR');
}
return String(parseFloat(result.toFixed(10)));
}두 피연산자와 연산자를 받아 실제 계산을 수행하는 함수입니다. 입력된 피연사자들을 숫자형으로 변환하여 계산이 정확하게 이루어지도록 합니다. 계산 후, 최종적으로 문자열로 다시 반환합니다.
고양이 간식 사줄려고 개발하는 사람