반응형
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>계산기</title>
<style>
* {
box-sizing: border-box;
}
#result {
width: 180px;
height: 50px;
margin: 5px;
text-align: right;
}
#operator {
width: 50px;
height: 50px;
margin: 5px;
text-align: center;
}
button {
width: 50px;
height: 50px;
margin: 5px;
}
</style>
</head>
<!-- 계산기 버튼 구현 -->
<body>
<input readonly id="operator" />
<input readonly type="number" id="result" />
<div class="row">
<button id="num-7">7</button>
<button id="num-8">8</button>
<button id="num-9">9</button>
<button id="plus">+</button>
</div>
<div class="row">
<button id="num-4">4</button>
<button id="num-5">5</button>
<button id="num-6">6</button>
<button id="minus">-</button>
</div>
<div class="row">
<button id="num-1">1</button>
<button id="num-2">2</button>
<button id="num-3">3</button>
<button id="divide">/</button>
</div>
<div class="row">
<button id="clear">C</button>
<button id="num-0">0</button>
<button id="calculate">=</button>
<button id="multiply">x</button>
</div>
<script>
let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
const onClickNumber = (event) => {
if (!operator) {
numOne += event.target.textContent;
$result.value += event.target.textContent;
return;
}
if (!numTwo) {
$result.value = '';
}
numTwo += event.target.textContent;
$result.value += event.target.textContent;
};
document.querySelector('#num-0').addEventListener('click', onClickNumber);
document.querySelector('#num-1').addEventListener('click', onClickNumber);
document.querySelector('#num-2').addEventListener('click', onClickNumber);
document.querySelector('#num-3').addEventListener('click', onClickNumber);
document.querySelector('#num-4').addEventListener('click', onClickNumber);
document.querySelector('#num-5').addEventListener('click', onClickNumber);
document.querySelector('#num-6').addEventListener('click', onClickNumber);
document.querySelector('#num-7').addEventListener('click', onClickNumber);
document.querySelector('#num-8').addEventListener('click', onClickNumber);
document.querySelector('#num-9').addEventListener('click', onClickNumber);
const onClickOperator = (op) => () => {
if (numOne) {
operator = op;
$operator.value = op;
} else {
alert('숫자를 먼저 입력하세요.');
}
};
document
.querySelector('#plus')
.addEventListener('click', onClickOperator('+'));
document
.querySelector('#minus')
.addEventListener('click', onClickOperator('-'));
document
.querySelector('#divide')
.addEventListener('click', onClickOperator('/'));
document
.querySelector('#multiply')
.addEventListener('click', onClickOperator('*'));
document
.querySelector('#multiply')
.addEventListener('click', onClickOperator('*'));
document.querySelector('#calculate').addEventListener('click', () => {
if (numTwo) {
switch (operator) {
case '+':
$result.value = parseInt(numOne) + parseInt(numTwo);
break;
case '-':
$result.value = numOne - numTwo;
break;
case '*':
$result.value = numOne * numTwo;
break;
case '/':
$result.value = numOne / numTwo;
break;
default:
break;
}
} else {
alert('숫자를 먼저 입력하세요.');
}
});
document.querySelector('#clear').addEventListener('click', () => {
numOne = '';
operator = '';
numTwo = '';
$operator.value = '';
$result.value = '';
});
</script>
</body>반응형
'개발 이야기 > 개발 도서' 카테고리의 다른 글
| 제로초 자바스크립트 입문 <로또 추첨기> (0) | 2024.03.25 |
|---|---|
| 제로초 자바스크립트 입문 <숫자 야구> (0) | 2024.03.22 |
| 제로초 자바스크립트 입문 <끝말잇기 2> (0) | 2024.03.18 |
| 제로초 자바스크립트 입문 <끝말잇기 1> (0) | 2024.03.15 |
| 제로초 자바스크립트 입문 <window 객체> (0) | 2024.03.14 |