🚀 -1, -2 와 같이 음수 계산 구현하기
📍 순서도
🧑🏻💻 코드
const onClickOperator = (op) => () => {
if (op === '-'){
if(numOne && !operator){
operator = op;
$operator.value = op;
return;
} else if (!numOne){
numOne += op;
$result.value = op;
return;
};
if (!numTwo){
numTwo += op;
$result.value = op;
return;
} ;
} else {
if(numOne){
operator = op;
$operator.value = op;
} else {
alert ('숫자를 입력해 주세요.')
};
};
}✏️
if문을 사용하라는 힌트는 보았는데 너무 어려웠다.
순서도를 수정하면서도 이렇게 그리는 게 맞는 건지 확신이 서지 않았으나,
일단 순서도대로 코드를 작성하고 실행하니 구현은 된다.
if문 중첩 줄일 수 있도록 다시 수정해야겠다.
✍🏻 CSS 수정하기
무엇이 아쉬웠나 했더니 딱딱한 모양이 문제였다.
CSS 에 시간을 들이니 훨씬 보기 좋은 계산기가 만들어졌다.
💻 HTML
<!DOCTYPE html>
<html lang="ko">
<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>계산기</title>
<link rel="stylesheet" href="main.css">
<script defer src="main.js"></script>
</head>
<body>
<div class="number shadow">
<input readonly id="operator" class="shadow">
<input readonly type="text" id="result" class="shadow">
<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">*</button>
</div>
</div>
</body>
</html>💻 CSS
* {
box-sizing: border-box;
}
#result {
width: 180px;
height: 50px;
margin: 5px;
text-align: right;
padding: 10px;
outline: none;
}
#operator {
width: 50px;
height: 50px;
margin: 5px;
text-align: center;
outline: none;
}
button, .shadow {
border: none;
background-color: #e9e9ed;
border-radius: 10px;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
}
button{
width: 50px;
height: 50px;
margin: 5px;
border: none;
cursor: pointer;
}
.number {
background-color: #e9e9ed;
margin: 100px auto;
padding: 50px 0;
text-align: center;
width: 300px;
border-radius: 30px;
}💻 Java Script
let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
const onClickNumber = (event) => {
if (operator){ // 비어있지 않다
if(!numTwo){
$result.value='';
}
numTwo += event.target.textContent;
} else { // 비어있다
numOne += 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 (op === '-'){
if(numOne && !operator){
operator = op;
$operator.value = op;
return;
} else if (!numOne){
numOne += op;
$result.value = op;
return;
};
if (!numTwo){
numTwo += op;
$result.value = op;
return;
} ;
} else {
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('#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;
}
$operator.value = '';
numOne = $result.value;
operator = '';
numTwo = '';
}
else {
alert('숫자를 먼저 입력하세요.');
}
});
document.querySelector('#clear').addEventListener('click', () => {
numOne = '';
operator = '';
numTwo = '';
$operator.value = '';
$result.value = '';
});