HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>calculator-SharryHong</title>
<link rel="stylesheet" href="calculator.css">
</head>
<body>
<div class="wrap">
<div class="input-box">
<div class="show-box"></div>
<input id="numInput" type="text" placeholder="0">
</div>
<table>
<tbody>
<tr>
<td colspan="3" class="col3"><button id="acBtn">AC</button></td>
<td><button class="op">/</button></td>
</tr>
<tr>
<td><button class="number">7</button></td>
<td><button class="number">8</button></td>
<td><button class="number">9</button></td>
<td><button class="op">*</button></td>
</tr>
<tr>
<td><button class="number">4</button></td>
<td><button class="number">5</button></td>
<td><button class="number">6</button></td>
<td><button class="op">-</button></td>
</tr>
<tr>
<td><button class="number">1</button></td>
<td><button class="number">2</button></td>
<td><button class="number">3</button></td>
<td><button class="op">+</button></td>
</tr>
<tr>
<td colspan="2" class="col2"><button class="number">0</button></td>
<td><button class="number">.</button></td>
<td><button class="op">=</button></td>
</tr>
</tbody>
</table>
</div>
<script src="calculator.js"></script>
</body>
</html>
CSS
table, tbody, tr, td, button {
margin: 0;
padding: 0;
}
button {
width: 100px;
height: 100px;
font-size: 40px;
color: #333;
border: 1px solid #bbb;
cursor: pointer;
}
.wrap {
width: 410px;
margin: 50px auto 0 auto;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.input-box {
position: relative;
width: 100%;
height: 100px;
padding: 5px;
box-sizing: border-box;
text-align: center;
background-color: #202020;
}
.show-box {
color: #757575;
text-align: right;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#numInput {
position: absolute;
left: 7px;
bottom: 5px;
display: inline-block;
padding: 3px;
width: 94%;
height: 60px;
color: #fff;
text-align: right;
font-size: 50px;
box-sizing: border-box;
border: none;
background-color: #202020;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
button.number {
background-color: #efefef;
}
button.number:hover {
background: #ddd;
}
button.number:active {
background-color: #ccc;
}
button.op {
background-color: #FF9B22;
}
button.op:hover {
background-color: #f99112;
}
button.op:active {
background-color: #EB7016;
}
.col2 button {
width: 200px;
}
.col3 button {
width: 300px;
}
JS
let numbers = document.querySelectorAll(".number")
let opText = document.querySelectorAll(".op")
let numInput = document.querySelector("#numInput")
let acBtn = document.querySelector("#acBtn")
let equalBtn = document.querySelector("#equal")
let showBox = document.querySelector(".show-box")
let checkBtn = false
let checkPreNum = false
for (let i = 0; i < numbers.length; i++) {
numbers[i].addEventListener('click', inputNum)
}
function inputNum() {
if (checkBtn)
clearNum()
if (cal.preOp === '=' && checkBtn === true)
clearShowBox()
var inputText = this.innerHTML
numInput.value += inputText
showBox.innerHTML += inputText
checkBtn = false
}
function clearNum() {
numInput.value = ""
console.log("clear")
}
function clearShowBox() {
showBox.innerHTML = ""
}
let cal = {
result: 0,
preNum: 0,
nextNum: 0,
preOp: null,
op: null,
calculator: function() {
var inputText = this.innerHTML
cal.op = inputText
showBox.innerHTML += inputText
checkBtn = true
if (!checkPreNum) {
cal.preNum = Number(numInput.value)
console.log(cal.preNum)
checkPreNum = true
} else {
cal.nextNum = Number(numInput.value)
console.log(cal.nextNum)
clearNum()
cal.resultFn(cal.preOp)
cal.preNum = cal.result
if (cal.op == '=') {
checkPreNum = false
showBox.innerHTML += cal.result +', '
}
}
cal.preOp = cal.op
},
resultFn: function(op) {
switch (op) {
case '+':
cal.result = cal.preNum + cal.nextNum
console.log("result"+cal.result)
break;
case '-':
cal.result = cal.preNum - cal.nextNum
console.log("result"+cal.result)
break;
case '*':
cal.result = cal.preNum * cal.nextNum
console.log("result"+cal.result)
break;
case '/':
cal.result = cal.preNum / cal.nextNum
console.log("result"+cal.result)
break;
}
numInput.value = cal.result
}
}
for (let i = 0; i < opText.length; i++) {
opText[i].addEventListener('click', cal.calculator)
}
acBtn.addEventListener('click', function() {
numInput.value = ""
showBox.innerHTML = ""
cal.result, cal.preNum, cal.nextNum = 0
checkPreNum = false
})
