<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div :nth-child(5) {
color: red;
}
div input:nth-child(4) {
color: limegreen
}
div input:nth-child(-n+3) {
color: blue;
font-weight: bold;
}
#rsInput {
text-align: right;
width: 300px;
}
.upBtn {
width: 150px;
}
.opBtn {
margin-left: 10px;
margin-right: 10px;
}
.numBtn {
width: 50px;
}
</style>
<script>
var value = "";
let flag = true;
function addRs(num) {
var rsInput = document.getElementById('rsInput');
if (flag) {
rsInput.value = num;
flag = false;
} else {
rsInput.value = rsInput.value + num;
}
}
function addOp(op) {
var rsInput = document.getElementById('rsInput');
// if (rsInput.isEmpty()) {
//
// }
value += rsInput.value + " " + op + " ";
rsInput.value = "";
console.log(value);
}
function opResult() {
var rsInput = document.getElementById('rsInput');
console.log(value + rsInput.value);
document.getElementById("rsInput").value = eval(value + rsInput.value);
}
function changeSign() {
var rsInput = document.getElementById('rsInput');
document.getElementById('rsInput').value = Number.parseFloat(document.getElementById('rsInput').value) * -1;
}
function addComa() {
var rsInput = document.getElementById('rsInput');
if (!rsInput.value.includes('.')) {//콤마 적용 여부 체크
rsInput.value = rsInput.value + ".";
}
}
function sct(oper) {
var rsInput = document.getElementById('rsInput');
if (oper === "sin") {
rsInput.value = Math.sin(rsInput.value * Math.PI / 180);
} else if (oper === "cos") {
rsInput.value = Math.cos(rsInput.value * Math.PI / 180);
} else if (oper === "tan") {
rsInput.value = Math.tan(rsInput.value * Math.PI / 180);
}
}
function Allreset() {
value = "";
flag = true;
}
</script>
<body>
<form>
<input type="text" value="0" readonly id="rsInput">
<div>
<button type="reset" class="upBtn" onclick="Allreset()">Clear</button>
<button type="button" class="upBtn" onclick="opResult()">=</button>
</div>
<div>
<input type="button" value="1" onclick="addRs(this.value);" class="numBtn">
<input type="button" value="2" onclick="addRs(this.value);" class="numBtn">
<input type="button" value="3" onclick="addRs(this.value);" class="numBtn">
<input type="button" value="+" class="numBtn opBtn" onclick="addOp(this.value);">
<button type="button" value="**" class="numBtn " onclick="addOp(this.value);">x^y</button>
<!-- <input type="button" value="x^y" onclick="addOp(this.value);" class="numBtn">-->
</div>
<div>
<input type="button" value="4" onclick="addRs(this.value);" class="numBtn">
<input type="button" value="5" onclick="addRs(this.value);" class="numBtn">
<input type="button" value="6" onclick="addRs(this.value);" class="numBtn">
<input type="button" value="-" class="numBtn opBtn" onclick="addOp(this.value);">
<input type="button" value="sin" onclick="sct(this.value);" class="numBtn">
</div>
<div>
<input type="button" value="7" onclick="addRs(this.value);" class="numBtn">
<input type="button" value="8" onclick="addRs(this.value);" class="numBtn">
<input type="button" value="9" onclick="addRs(this.value);" class="numBtn">
<input type="button" value="*" class="numBtn opBtn" onclick="addOp(this.value);">
<input type="button" value="cos" onclick="sct(this.value);" class="numBtn">
</div>
<div>
<input type="button" value="0" onclick="addRs(this.value);" class="numBtn">
<input type="button" value="+/-" onclick="changeSign();" class="numBtn">
<input type="button" value="." onclick="addComa()" class="numBtn">
<input type="button" value="/" class="numBtn opBtn" onclick="addOp(this.value);">
<input type="button" value="tan" onclick="sct(this.value);" class="numBtn">
</div>
</form>
</body>
</html>