Skip to content

Commit 29d263a

Browse files
lamai6lamai6
committed
feat(us#9): perform mathematical operations and display result
1 parent 5871789 commit 29d263a

File tree

7 files changed

+70
-48
lines changed

7 files changed

+70
-48
lines changed

‎.eslintrc.js

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ module.exports = {
2727
ExportDeclaration: { multiline: true, consistent: true },
2828
},
2929
],
30+
'no-eval': 'off',
3031
},
3132
settings: {
3233
react: {

‎src/components/Calculator/Calculator.jsx

+34-25
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component } from 'react';
22
import NumberKey from '../Key/NumberKey/NumberKey';
33
import ResultKey from '../Key/ResultKey/ResultKey';
4-
import OperatorKey from '../Key/OperatorKey/Operator';
4+
import OperatorKey from '../Key/OperatorKey/OperatorKey';
55
import DotKey from '../Key/DotKey/DotKey';
66
import ClearKey from '../Key/ClearKey/ClearKey';
77
import Display from '../Display/Display';
@@ -14,30 +14,36 @@ class Calculator extends Component {
1414
input: '',
1515
result: '',
1616
};
17-
this.addKeyToInput = this.addKeyToInput.bind(this);
18-
this.displayResult = this.displayResult.bind(this);
19-
this.clearInput = this.clearInput.bind(this);
20-
this.clearDisplay = this.clearDisplay.bind(this);
17+
this.setInput = this.setInput.bind(this);
18+
this.setResult = this.setResult.bind(this);
2119
}
2220

23-
addKeyToInput(key) {
24-
this.setState(({ input, result }) => ({
25-
input: `${input}${key}`,
26-
result: `${result}${key}`,
27-
}));
21+
setInput(input) {
22+
this.setState(() => ({ input }));
2823
}
2924

30-
displayResult(result) {
25+
setResult(result) {
3126
this.setState(() => ({ result }));
3227
}
3328

34-
clearInput() {
35-
this.setState(() => ({ input: '' }));
36-
}
29+
// addKeyToInput(key) {
30+
// this.setState(({ input, result }) => ({
31+
// input: `${input}${key}`,
32+
// result: `${result}${key}`,
33+
// }));
34+
// }
3735

38-
clearDisplay() {
39-
this.setState(() => ({ result: '0' }));
40-
}
36+
// displayResult(result) {
37+
// this.setState(() => ({ result }));
38+
// }
39+
40+
// clearInput() {
41+
// this.setState(() => ({ input: '' }));
42+
// }
43+
44+
// clearDisplay() {
45+
// this.setState(() => ({ result: '0' }));
46+
// }
4147

4248
render() {
4349
const { input, result } = this.state;
@@ -53,32 +59,35 @@ class Calculator extends Component {
5359
style: clearStyle,
5460
key: { id: clearId, value: clearValue },
5561
} = CLEAR;
56-
5762
const numberKeys = NUMBERS.keys.map(({ id, value }) => (
5863
<NumberKey
5964
id={id}
6065
value={value}
6166
key={id}
6267
style={NUMBERS.style}
63-
addKeyToInput={this.addKeyToInput}
68+
input={input}
69+
setInput={this.setInput}
70+
result={result}
71+
setResult={this.setResult}
6472
/>
6573
));
66-
6774
const operatorKeys = OPERATORS.keys.map(({ id, value }) => (
6875
<OperatorKey
6976
id={id}
7077
value={value}
7178
key={id}
7279
style={OPERATORS.style}
73-
addKeyToInput={this.addKeyToInput}
80+
input={input}
81+
setInput={this.setInput}
82+
setResult={this.setResult}
7483
/>
7584
));
7685

7786
return (
7887
<div>
7988
<ClearKey
80-
clearInput={this.clearInput}
81-
clearDisplay={this.clearDisplay}
89+
setInput={this.setInput}
90+
setResult={this.setResult}
8291
id={clearId}
8392
value={clearValue}
8493
style={clearStyle}
@@ -87,7 +96,7 @@ class Calculator extends Component {
8796
{numberKeys}
8897
<DotKey
8998
input={input}
90-
addKeyToInput={this.addKeyToInput}
99+
setInput={this.setInput}
91100
id={dotId}
92101
value={dotValue}
93102
style={dotStyle}
@@ -96,7 +105,7 @@ class Calculator extends Component {
96105
{operatorKeys}
97106
<ResultKey
98107
input={input}
99-
displayResult={this.displayResult}
108+
setResult={this.setResult}
100109
id={resultId}
101110
value={resultValue}
102111
style={resultStyle}

‎src/components/Key/ClearKey/ClearKey.jsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import PropTypes from 'prop-types';
22
import Key from '../Key';
33

4-
function ClearKey({ id, value, style, clearInput, clearDisplay }) {
5-
const handleClick = () => {
6-
clearInput();
7-
clearDisplay();
4+
function ClearKey({ id, value, style, setInput, setResult }) {
5+
const clear = () => {
6+
setInput('');
7+
setResult('0');
88
};
99

10-
return <Key id={id} value={value} style={style} handleClick={handleClick} />;
10+
return <Key id={id} value={value} style={style} handleClick={clear} />;
1111
}
1212

1313
ClearKey.propTypes = {
@@ -17,8 +17,8 @@ ClearKey.propTypes = {
1717
backgroundColor: PropTypes.string,
1818
color: PropTypes.string,
1919
}),
20-
clearInput: PropTypes.func.isRequired,
21-
clearDisplay: PropTypes.func.isRequired,
20+
setInput: PropTypes.func.isRequired,
21+
setResult: PropTypes.func.isRequired,
2222
};
2323

2424
ClearKey.defaultProps = {

‎src/components/Key/DotKey/DotKey.jsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import PropTypes from 'prop-types';
22
import Key from '../Key';
33

4-
function DotKey({ id, value, style, input, addKeyToInput }) {
5-
const handleClick = () => {
6-
addKeyToInput(value);
4+
function DotKey({ id, value, style, input, setInput }) {
5+
const addDotToInput = () => {
6+
setInput(`${input}${value}`);
77
};
88

9-
return <Key id={id} value={value} style={style} handleClick={handleClick} />;
9+
return (
10+
<Key id={id} value={value} style={style} handleClick={addDotToInput} />
11+
);
1012
}
1113

1214
DotKey.propTypes = {
@@ -16,7 +18,8 @@ DotKey.propTypes = {
1618
backgroundColor: PropTypes.string,
1719
color: PropTypes.string,
1820
}),
19-
addKeyToInput: PropTypes.func.isRequired,
21+
input: PropTypes.string.isRequired,
22+
setInput: PropTypes.func.isRequired,
2023
};
2124

2225
DotKey.defaultProps = {

‎src/components/Key/NumberKey/NumberKey.jsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import PropTypes from 'prop-types';
22
import Key from '../Key';
33

4-
function NumberKey({ id, value, style, addKeyToInput }) {
5-
const handleClick = () => {
6-
addKeyToInput(value);
4+
function NumberKey({ id, value, style, input, setInput, result, setResult }) {
5+
const addKeyToInput = () => {
6+
setInput(`${input}${value}`);
7+
setResult(`${result}${value}`);
78
};
89

9-
return <Key id={id} value={value} style={style} handleClick={handleClick} />;
10+
return (
11+
<Key id={id} value={value} style={style} handleClick={addKeyToInput} />
12+
);
1013
}
1114

1215
NumberKey.propTypes = {
@@ -16,7 +19,10 @@ NumberKey.propTypes = {
1619
backgroundColor: PropTypes.string,
1720
color: PropTypes.string,
1821
}),
19-
addKeyToInput: PropTypes.func.isRequired,
22+
input: PropTypes.string.isRequired,
23+
setInput: PropTypes.func.isRequired,
24+
result: PropTypes.string.isRequired,
25+
setResult: PropTypes.func.isRequired,
2026
};
2127

2228
NumberKey.defaultProps = {

‎src/components/Key/OperatorKey/Operator.jsx ‎src/components/Key/OperatorKey/OperatorKey.jsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import PropTypes from 'prop-types';
22
import Key from '../Key';
33

4-
function OperatorKey({ id, value, style, addKeyToInput }) {
4+
function OperatorKey({ id, value, style, input, setInput }) {
55
const handleClick = () => {
6-
addKeyToInput(value);
6+
setInput(`${input}${value}`);
77
};
88

99
return <Key id={id} value={value} style={style} handleClick={handleClick} />;
@@ -16,7 +16,8 @@ OperatorKey.propTypes = {
1616
backgroundColor: PropTypes.string,
1717
color: PropTypes.string,
1818
}),
19-
addKeyToInput: PropTypes.func.isRequired,
19+
input: PropTypes.string.isRequired,
20+
setInput: PropTypes.func.isRequired,
2021
};
2122

2223
OperatorKey.defaultProps = {

‎src/components/Key/ResultKey/ResultKey.jsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import PropTypes from 'prop-types';
22
import Key from '../Key';
33

4-
function ResultKey({ id, value, style, input, displayResult }) {
4+
function ResultKey({ id, value, style, input, setResult }) {
55
const handleClick = () => {
6-
displayResult(input);
6+
let result = eval(input);
7+
if (`${result}`.includes('.')) result = result.toFixed(4);
8+
setResult(`${result}`);
79
};
810

911
return <Key id={id} value={value} style={style} handleClick={handleClick} />;
@@ -17,7 +19,7 @@ ResultKey.propTypes = {
1719
color: PropTypes.string,
1820
}),
1921
input: PropTypes.string.isRequired,
20-
displayResult: PropTypes.func.isRequired,
22+
setResult: PropTypes.func.isRequired,
2123
};
2224

2325
ResultKey.defaultProps = {

0 commit comments

Comments
 (0)