xxxxxxxxxx1
<div class="calculator card">2
3
<input type="text" class="calculator-screen z-depth-1" value="" disabled />4
5
<div class="calculator-keys">6
7
<button type="button" class="operator btn btn-info" value="+">+</button>8
<button type="button" class="operator btn btn-info" value="-">-</button>9
<button type="button" class="operator btn btn-info" value="*">×</button>10
<button type="button" class="operator btn btn-info" value="/">÷</button>11
12
<button type="button" value="7" class="btn btn-light waves-effect">7</button>13
<button type="button" value="8" class="btn btn-light waves-effect">8</button>14
<button type="button" value="9" class="btn btn-light waves-effect">9</button>15
16
17
<button type="button" value="4" class="btn btn-light waves-effect">4</button>18
<button type="button" value="5" class="btn btn-light waves-effect">5</button>19
<button type="button" value="6" class="btn btn-light waves-effect">6</button>20
21
22
<button type="button" value="1" class="btn btn-light waves-effect">1</button>23
<button type="button" value="2" class="btn btn-light waves-effect">2</button>24
<button type="button" value="3" class="btn btn-light waves-effect">3</button>25
26
27
<button type="button" value="0" class="btn btn-light waves-effect">0</button>28
<button type="button" class="decimal function btn btn-secondary" value=".">.</button>29
<button type="button" class="all-clear function btn btn-danger btn-sm" value="all-clear">AC</button>30
31
<button type="button" class="equal-sign operator btn btn-default" value="=">=</button>32
33
</div>34
</div>xxxxxxxxxx1
html {2
font-size: 62.5%;3
box-sizing: border-box;4
}5
6
*,7
*::before,8
*::after {9
margin: 0;10
padding: 0;11
box-sizing: inherit;12
}13
14
.calculator {15
border: 1px solid #ccc;16
border-radius: 5px;17
position: absolute;18
top: 50%;19
left: 50%;20
transform: translate(-50%, -50%);21
width: 400px;22
}23
24
.calculator-screen {25
width: 100%;26
height: 80px;27
border: none;28
background-color: #252525;29
color: #fff;30
text-align: right;31
padding-right: 20px;32
padding-left: 10px;33
font-size: 4rem;34
}35
36
button {37
height: 60px;38
font-size: 2rem!important;39
}40
41
.equal-sign {42
height: 98%;43
grid-area: 2 / 4 / 6 / 5;44
}45
46
.calculator-keys {47
display: grid;48
grid-template-columns: repeat(4, 1fr);49
grid-gap: 20px;50
padding: 20px;51
}xxxxxxxxxx1
const calculator = {2
displayValue: '0',3
firstOperand: null,4
waitingForSecondOperand: false,5
operator: null,6
};7
8
function inputDigit(digit) {9
const { displayValue, waitingForSecondOperand } = calculator;10
11
if (waitingForSecondOperand === true) {12
calculator.displayValue = digit;13
calculator.waitingForSecondOperand = false;14
} else {15
calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;16
}17
}18
19
function inputDecimal(dot) {20
// If the `displayValue` does not contain a decimal point21
if (!calculator.displayValue.includes(dot)) {22
// Append the decimal point23
calculator.displayValue += dot;24
}25
}26
27
function handleOperator(nextOperator) {28
const { firstOperand, displayValue, operator } = calculator29
const inputValue = parseFloat(displayValue);30
31
if (operator && calculator.waitingForSecondOperand) {32
calculator.operator = nextOperator;33
return;34
}35
36
if (firstOperand == null) {37
calculator.firstOperand = inputValue;38
} else if (operator) {39
const currentValue = firstOperand || 0;40
const result = performCalculation[operator](currentValue, inputValue);41
42
calculator.displayValue = String(result);43
calculator.firstOperand = result;44
}45
46
calculator.waitingForSecondOperand = true;47
calculator.operator = nextOperator;48
}49
50
const performCalculation = {51
'/': (firstOperand, secondOperand) => firstOperand / secondOperand,52
53
'*': (firstOperand, secondOperand) => firstOperand * secondOperand,54
55
'+': (firstOperand, secondOperand) => firstOperand + secondOperand,56
57
'-': (firstOperand, secondOperand) => firstOperand - secondOperand,58
59
'=': (firstOperand, secondOperand) => secondOperand60
};61
62
function resetCalculator() {63
calculator.displayValue = '0';64
calculator.firstOperand = null;65
calculator.waitingForSecondOperand = false;66
calculator.operator = null;67
}68
69
function updateDisplay() {70
const display = document.querySelector('.calculator-screen');71
display.value = calculator.displayValue;72
}73
74
updateDisplay();75
76
const keys = document.querySelector('.calculator-keys');77
keys.addEventListener('click', (event) => {78
const { target } = event;79
if (!target.matches('button')) {80
return;81
}82
83
if (target.classList.contains('operator')) {84
handleOperator(target.value);85
updateDisplay();86
return;87
}88
89
if (target.classList.contains('decimal')) {90
inputDecimal(target.value);91
updateDisplay();92
return;93
}94
95
if (target.classList.contains('all-clear')) {96
resetCalculator();97
updateDisplay();98
return;99
}100
101
inputDigit(target.value);102
updateDisplay();103
}); Console errors: 0