/
Calculator.vue
119 lines (113 loc) · 2.74 KB
/
Calculator.vue
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
<template>
<div class="calculator">
<div class="display">{{current || '0'}}</div>
<div @click="clear" class="btn">C</div>
<div @click="sign" class="btn">+/-</div>
<div @click="percent" class="btn">%</div>
<div @click="divide" class="btn operator">÷</div>
<div @click="append('7')" class="btn">7</div>
<div @click="append('8')" class="btn">8</div>
<div @click="append('9')" class="btn">9</div>
<div @click="times" class="btn operator">x</div>
<div @click="append('4')" class="btn">4</div>
<div @click="append('5')" class="btn">5</div>
<div @click="append('6')" class="btn">6</div>
<div @click="minus" class="btn operator">-</div>
<div @click="append('1')" class="btn">1</div>
<div @click="append('2')" class="btn">2</div>
<div @click="append('3')" class="btn">3</div>
<div @click="add" class="btn operator">+</div>
<div @click="append('0')" class="btn zero">0</div>
<div @click="dot" class="btn">.</div>
<div @click="equal" class="btn operator">=</div>
</div>
</template>
<script>
export default {
data() {
return {
previous: null,
current: '',
operator: null,
operatorClicked: false,
}
},
methods: {
clear() {
this.current = '';
},
sign() {
this.current = this.current.charAt(0) === '-' ?
this.current.slice(1) : `-${this.current}`;
},
percent() {
this.current = `${parseFloat(this.current) / 100}`;
},
append(number) {
if (this.operatorClicked) {
this.current = '';
this.operatorClicked = false;
}
this.current = `${this.current}${number}`;
},
dot() {
if (this.current.indexOf('.') === -1) {
this.append('.');
}
},
setPrevious() {
this.previous = this.current;
this.operatorClicked = true;
},
divide() {
this.operator = (a, b) => a / b;
this.setPrevious();
},
times() {
this.operator = (a, b) => a * b;
this.setPrevious();
},
minus() {
this.operator = (a, b) => a - b;
this.setPrevious();
},
add() {
this.operator = (a, b) => a + b;
this.setPrevious();
},
equal() {
this.current = `${this.operator(
parseFloat(this.current),
parseFloat(this.previous)
)}`;
this.previous = null;
}
}
}
</script>
<style scoped>
.calculator {
margin: 0 auto;
width: 400px;
font-size: 40px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(50px, auto);
}
.display {
grid-column: 1 / 5;
background-color: #333;
color: white;
}
.zero {
grid-column: 1 / 3;
}
.btn {
background-color: #F2F2F2;
border: 1px solid #999;
}
.operator {
background-color: orange;
color: white;
}
</style>