공부/javascript
2022.06.05 - (+ 수정완료 ) javascript 계산기 만들기
기묜몬
2022. 6. 5. 23:34
제로초님 강의를 참고하여 만들었습니다.
[ HTML / CSS ]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Gugi&display=swap"
rel="stylesheet"
/>
<meta charset="utf-8" />
<title>계산기연습</title>
<style>
* {
box-sizing: border-box;
}
#result {
width: 180px;
height: 50px;
margin: 5px;
text-align: right;
border-color: aliceblue;
border-radius: 10px;
}
#operator {
width: 50px;
height: 50px;
margin: 5px;
text-align: center;
border-color: aliceblue;
border-radius: 10px;
}
button {
width: 50px;
height: 50px;
margin: 5px;
border-color: aliceblue;
border-radius: 10px;
}
#clear {
background-color: palevioletred;
border-color: aliceblue;
}
#calculate {
background-color: pink;
}
.calBox {
background-color: #a9cce0;
padding: 10px 10px 10px 13px;
width: 280px;
border-radius: 20px;
margin: 30px 0px 0px 30px;
}
.calText {
text-align: center;
font-size: 20px;
color: black;
font-family: "Gugi", cursive;
}
#name {
text-align: right;
font-size: 13px;
color: whitesmoke;
}
</style>
</head>[ JS ]
<!-- 계산기 버튼 구현 -->
<body>
<div class="calBox">
<div class="calText">
<p id="cal">귀여운 나만의 계산기</p>
<p id="name">hyoeun : - )</p>
</div>
<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>
</div>
<script>
let calNum1 = "";
let operator = "";
let calNum2 = "";
let calR = "";
let result = "";
const $operator = document.querySelector("#operator");
const $result = document.querySelector("#result");
// 계산기 숫자, 연산부호 클릭이벤트 생성생성
// if문 중첩
// const onClickNum = (e) => {
// if (!operator) {
// calNum1 += e.target.textContent;
// $result.value += e.target.textContent;
// return;
// }
// if (!calNum2) {
// $result.value = "";
// }
// calNum2 += e.target.textContent;
// $result.value += e.target.textContent;
// };
const onClickNum = (e) => {
if (operator) {
if (!calNum2) {
// num2가 없는 상황에서는 화면의 숫자를 "" 지워라..
$result.value = "";
}
// 처음 클릭할때 num2가 없고, 두번째 숫자 클릭할때 num2가 생김 -> 화면을 잠깐 지우고나서 num2의 숫자가 생성
calNum2 += e.target.textContent;
} else {
calNum1 += e.target.textContent;
}
$result.value += e.target.textContent;
};
document.querySelector("#num-0").addEventListener("click", onClickNum);
document.querySelector("#num-1").addEventListener("click", onClickNum);
document.querySelector("#num-2").addEventListener("click", onClickNum);
document.querySelector("#num-3").addEventListener("click", onClickNum);
document.querySelector("#num-4").addEventListener("click", onClickNum);
document.querySelector("#num-5").addEventListener("click", onClickNum);
document.querySelector("#num-6").addEventListener("click", onClickNum);
document.querySelector("#num-7").addEventListener("click", onClickNum);
document.querySelector("#num-8").addEventListener("click", onClickNum);
document.querySelector("#num-9").addEventListener("click", onClickNum);
const onClickOper = (op) => () => {
//ex) +를 누르면 op가 +가 됨
if (calNum1) {
operator = op;
$operator.value = op;
} else if (!calNum2) {
alert("숫자를 입력하세요.");
}
};
document
.querySelector("#plus")
.addEventListener("click", onClickOper("+"));
document
.querySelector("#minus")
.addEventListener("click", onClickOper("-"));
document
.querySelector("#divide")
.addEventListener("click", onClickOper("/"));
document
.querySelector("#multiply")
.addEventListener("click", onClickOper("*"));
document.querySelector("#calculate").addEventListener("click", () => {
if (calNum2) {
if (operator == "+") {
$result.value = parseInt(calNum1) + parseInt(calNum2);
} else if (operator == "-") {
$result.value = parseInt(calNum1) - parseInt(calNum2);
} else if (operator == "*") {
$result.value = parseInt(calNum1) * parseInt(calNum2);
} else {
$result.value = parseInt(calNum1) / parseInt(calNum2);
}
// 누적이 안됐던 부분 추가~~!
$operator.value = "";
calNum1 = $result.value;
operator = "";
calNum2 = "";
} else {
alert("숫자를 먼저 입력하세요.");
}
});
document.querySelector("#clear").addEventListener("click", () => {
calNum1 = "";
calNum2 = "";
operator = "";
$operator.value = "";
$result.value = "";
});
</script>
</body>
</html>하... 값이 누적이 안됨.. 검색을 해도해도 어떻게해야 할지 모르겠어서
그냥 내일 첨부터 다시 뜯어 고칠 생각..
+ 6/8(수) 진짜 바보다..
연산식 함수에서 누적해주는 코드 몇 줄만 입력하면 되는데
그걸 놓치고 있었다.. 나는 언제 늘까 ㅠ_ㅠ
