자바스크립트로 간단하게 계산기 만들어 보기 ㅎㅎㅎ
깃허브에 올려야 하는데 깃허브 한 번 정리하고 손봐야 되서 그냥 블로그에 올린다.
나중에 전체 소스만 깃허브로 보내기
1. 버튼 16개 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</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 readonoly 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">4</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>
</script>
</body>
</html>
여기까지 html로 버튼 16개 만들기
이제 script 태그 안에 각 버튼마다 이벤트 리스너 달아줘야 함
#num-0과 #num-1에 대해서만 이벤트 리스너 달아주면 이런 식으로 동작함
document.querySelector('#num-0').addEventListener('click', () => {
if (operator) {
numTwo += '0';
} else {
numOne += '0';
}
});
document.querySelector('#num-1').addEventListener('click', () => {
if (operator) {
numTwo += 1;
} else {
numOne += 1;
}
$result.value += '1';
});
이걸 16번 해 줘야 하는데 어떻게 하면 간단하게 줄일 수 있을까?
함수를 만드는 고차함수를 써야 함...
0부터 9까지 저장하는 부분은 매개변수로 만들고 다른 부분은 함수로 만들어 줘야 한다.
노가다중
2. 숫자 버튼 이벤트 리스너
let numOne = '';
let operator = '';
let numTwo = '';
const $Operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
const onClickButton = (number) => (event) => {
if (operator) {
numTwo += number;
} else {
numOne += number;
}
$result.value += number;
};
document.querySelector('#num-0').addEventListener('click', onClickButton('0'));
document.querySelector('#num-1').addEventListener('click', onClickButton('1'));
document.querySelector('#num-2').addEventListener('click', onClickButton('2'));
document.querySelector('#num-3').addEventListener('click', onClickButton('3'));
document.querySelector('#num-4').addEventListener('click', onClickButton('4'));
document.querySelector('#num-5').addEventListener('click', onClickButton('5'));
document.querySelector('#num-6').addEventListener('click', onClickButton('6'));
document.querySelector('#num-7').addEventListener('click', onClickButton('7'));
document.querySelector('#num-8').addEventListener('click', onClickButton('8'));
document.querySelector('#num-9').addEventListener('click', onClickButton('9'));
여기까지 숫자 버튼 addEventListener 줄인거
let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
const onClickNumber = (event) => {
if (operator) {
numTwo += event.target.textContent;
} else {
numOne += event.target.textContent;
}
$result.value += event.target.textContent;
};
document.querySelector('#num-1').addEventListener('click', onClickNumber);
document.querySelector('#num-2').addEventListener('click', onClickNumber);
document.querySelector('#num-3').addEventListener('click', onClickNumber);
document.querySelector('#num-0').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);
3. 오퍼레이터 버튼 이벤트 리스너
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('x'));
document.querySelector('#calculate').addEventListener('click', () => {});
document.querySelector('#clear').addEventListener('click', () => {});
4. onClickNumber 이중 if문 손보기
이제 onClickNumer를 손봐야 함
if 문이 2개라서 순서를 조정해서 1개로 만들어야 한다
const onClickOperator = (event) => {
if (operator) {
if (!numTwo) {
$result.value = '';
}
numTwo += event.target.textContent;
$result.value += event.target.textContent;
} else {
numOne += event.target.textContent;
$result.value += event.target.textContent;
}
}
그냥 operator이 존재하는 경우와 존재하지 않는 경우로 분기점을 잡아야 함
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;
} else {
$result.value = '';
}
numTwo += event.target.textContent;
$result.value += event.target.textContent;
};
document.querySelector('#num-1').addEventListener('click', onClickNumber);
document.querySelector('#num-2').addEventListener('click', onClickNumber);
document.querySelector('#num-3').addEventListener('click', onClickNumber);
document.querySelector('#num-0').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);
5. clear 버튼, = 버튼 이벤트 핸들러
document.querySelector('#calculate').addEventListener('click', () => {
if(numTwo) {
switch (operator) {
case '+':
$result.value = parseInt(numOne) + parseInt(numTwo);
break;
case '-':
$result.value = parseInt(numOne) - parseInt(numTwo);
break;
case 'x':
$result.value = parseInt(numOne) * parseInt(numTwo);
break;
case '/':
$result.value = parseInt(numOne) / parseInt(numTwo);
break;
default:
break;
}
} else {
alert('숫자를 먼저 입력해라~');
}
});
document.querySelector('#clear').addEventListener('click', () => {
numOne = '';
operator = '';
numTwo = '';
$operator.value = '';
$result.value = '';
});
전체 소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</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 readonoly 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">4</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;
} else {
$result.value = '';
}
numTwo += event.target.textContent;
$result.value += event.target.textContent;
};
document.querySelector('#num-1').addEventListener('click', onClickNumber);
document.querySelector('#num-2').addEventListener('click', onClickNumber);
document.querySelector('#num-3').addEventListener('click', onClickNumber);
document.querySelector('#num-0').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('x'));
document.querySelector('#calculate').addEventListener('click', () => {
if(numTwo) {
switch (operator) {
case '+':
$result.value = parseInt(numOne) + parseInt(numTwo);
break;
case '-':
$result.value = parseInt(numOne) - parseInt(numTwo);
break;
case 'x':
$result.value = parseInt(numOne) * parseInt(numTwo);
break;
case '/':
$result.value = parseInt(numOne) / parseInt(numTwo);
break;
default:
break;
}
} else {
alert('숫자를 먼저 입력해라~');
}
});
document.querySelector('#clear').addEventListener('click', () => {
numOne = '';
operator = '';
numTwo = '';
$operator.value = '';
$result.value = '';
});
</script>
</body>
여기까지 일단 완성
테스트 돌려보니 5+7 해보니까 결과값이 12 잘 됨
C버튼이 안 먹혀서 클리어 이벤트 핸들러 오타 수정함~
위에 전체 코드에는 오타 수정한 완성본 올려 놓음
제2편에서는
1. 숫자 지울 수 있는 backspace 버튼
2. 계산기에 파스텔톤 입히기
3. 다중 계산을 위해 숫자와 연산자 입력을 이어서 받을 수 있도록 로직 개선.
생각 해 보니 파스텔톤 입히는 걸 가장 마지막에 해야 할 것 같다~
https://awesomepossum.tistory.com/315
[자바스크립트] ✨ html/css/js로 계산기 만들기 제2탄 🧙🏻♀️✨
https://awesomepossum.tistory.com/314 [자바스크립트] html/css/js로 계산기 만들기 제1탄자바스크립트로 간단하게 계산기 만들어 보기 ㅎㅎㅎ 깃허브에 올려야 하는데 깃허브 한 번 정리하고 손봐야 되서
awesomepossum.tistory.com
'JavaScript' 카테고리의 다른 글
| [JavaScript] 서버 통신과 JSON (7) | 2024.12.22 |
|---|---|
| [자바스크립트] html/css/js로 계산기 만들기 제2탄 🧙🏻♀️✨ (12) | 2024.11.08 |
| [JavaScript] 자바스크립트 비동기 처리 promise then vs async await 차이점 (1) | 2024.05.23 |
| [Javascript] screen, location, history, navigator 객체와 속성 (+메서드) (0) | 2024.04.29 |
| [JavaScript] 자바스크립트 브라우저 객체 : alert(), open(), prompt(), confirm(), setTimeout(), setInterval() (0) | 2024.04.23 |
