/
calculator.js
119 lines (102 loc) · 2.75 KB
/
calculator.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
// define global variables for num1, num2, operator, total
let num1 = '';
let num2 = '';
let operator = '';
let total = '';
const display = document.querySelector('.display');
display.innerHTML = 0;
const logic = e => {
// assign clicked button to a variable
let btn = e.target.innerHTML;
// if I press a number, run handleNumber
if (btn >= 0 && btn <= 9) {
// if oper has not been pressed, keep
// adding numbers to input
handleNumber(btn);
return;
} else if (btn === '*' ||
btn === '/' ||
btn === '+' ||
btn === '-') {
// if I press an operator, run handleOperator
handleOperator(btn);
return;
} else if (btn === 'C') {
clearInputs();
return;
} else if (btn === '=') {
handleTotal();
resetNum();
operator = '';
return;
}
};
const container = document.getElementById('container');
container.addEventListener('click', logic);
function handleNumber(num) {
// if num1 is empty, assign clicked numbers to num1
if (operator === '') {
num1 += num;
} else {
// else assign to num2
num2 += num;
}
displayInputs(num);
}
function handleOperator(oper) {
// assigns clicked btn to the global operator variable
operator = oper;
// highlight selected operator;
}
function displayInputs(btn) {
// debugger;
if (display.innerHTML === '0') {
display.innerHTML = btn;
} else if (display.innerHTML.length !== num1) {
if (operator === '') {
display.innerHTML = num1;
} else {
display.innerHTML = num2;
}
return;
}
}
function clearInputs() {
display.innerHTML = '0';
num1 = '';
num2 = '';
operator = '';
total = '';
}
function displayTotal() {
display.innerHTML = total;
}
// actually do the math
function handleTotal () {
switch (operator) {
case '+': total = parseFloat(+num1) + parseFloat((+num2)); break;
case '-': total = parseFloat(+num1) - parseFloat(+num2); break;
case '/': total = parseFloat(+num1) / parseFloat(+num2); break;
case '*': total = parseFloat(+num1) * parseFloat(+num2); break;
}
total = total.toFixed(2);
displayTotal();
}
function resetNum() {
num1 = total;
num2 = '';
}
// displays num1, num2, and total for logic debugging
// const debug1 = document.querySelector('#num1');
// const debug2 = document.querySelector('#num2');
// const debugTot = document.querySelector('#total');
// document.addEventListener('click', function() {
// debug1.innerHTML = num1;
// debug2.innerHTML = num2;
// debugTot.innerHTML = total;
// });
// figure out how to choose number of decimals in parseFloat
// 'C' --> display = ;';
// '.' adds '.' to display
// alert an error if user tries to input two decimals
// if display contains '.', alert error if clicked or do nothing