Skip to content

Commit de0c4d1

Browse files
abhi18avabhi18av
committed
udpate deps and the node engine
1 parent 502c5d3 commit de0c4d1

File tree

6 files changed

+76
-59
lines changed

6 files changed

+76
-59
lines changed

‎package.json‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@
33
"author": "caleb pollman",
44
"version": "0.1.0",
55
"private": true,
6-
"engines": {
7-
"node": "10.16.0",
8-
"npm": "6.9.0"
9-
},
106
"dependencies": {
117
"react": "^16.8.6",
128
"react-dom": "^16.8.6"

‎src/components/App/App.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from 'react';
2-
import Calculator from '../Calculator/Calculator';
3-
import './App.css';
1+
import React from "react";
2+
import Calculator from "../Calculator/Calculator";
3+
import "./App.css";
44

55
const App = () => (
66
<div className="app-container">

‎src/components/Calculator/Calculator.jsx‎

Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
import React, { Component } from 'react';
2-
import './Calculator.css';
1+
import React, { Component } from "react";
2+
import "./Calculator.css";
33

4-
import Display from '../Display/Display';
5-
import Keypad from '../Keypad/Keypad';
6-
import './Calculator.css';
4+
import Display from "../Display/Display";
5+
import Keypad from "../Keypad/Keypad";
6+
import "./Calculator.css";
77

88
class Calculator extends Component {
99
state = {
10-
displayValue: '0',
11-
numbers: ['9', '8', '7', '6', '5', '4', '3', '2', '1', '.', '0', 'ce'],
12-
operators: ['/', 'x', '-', '+'],
13-
selectedOperator: '',
14-
storedValue: '',
10+
displayValue: "0",
11+
numbers: ["9", "8", "7", "6", "5", "4", "3", "2", "1", ".", "0", "ce"],
12+
operators: ["/", "x", "-", "+"],
13+
selectedOperator: "",
14+
storedValue: ""
1515
};
1616

17-
componentWillMount = () => {
18-
document.addEventListener('keydown', this.handleKeyPress);
17+
UNSAFE_componentWillMount = () => {
18+
document.addEventListener("keydown", this.handleKeyPress);
1919
};
2020

2121
componentWillUnmount = () => {
22-
document.removeEventListener('keydown', this.handleKeyPress);
22+
document.removeEventListener("keydown", this.handleKeyPress);
2323
};
2424

2525
handleKeyPress = event => {
2626
const { numbers, operators } = this.state;
2727

28-
if (event.key === 'Backspace') this.updateDisplay(event, 'ce');
29-
if (event.key === 'Enter' || event.key === '=') this.callOperator(event);
28+
if (event.key === "Backspace") this.updateDisplay(event, "ce");
29+
if (event.key === "Enter" || event.key === "=") this.callOperator(event);
3030

3131
numbers.forEach(number => {
3232
if (event.key === number) {
@@ -49,34 +49,39 @@ class Calculator extends Component {
4949
storedValue = parseInt(storedValue, 10);
5050

5151
switch (selectedOperator) {
52-
case '+':
52+
case "+":
5353
displayValue = storedValue + displayValue;
5454
break;
55-
case '-':
55+
case "-":
5656
displayValue = storedValue - displayValue;
5757
break;
58-
case 'x':
58+
case "x":
5959
displayValue = storedValue * displayValue;
6060
break;
61-
case '/':
61+
case "/":
6262
displayValue = storedValue / displayValue;
6363
break;
6464
default:
65-
displayValue = '0';
65+
displayValue = "0";
6666
}
6767

6868
displayValue = displayValue.toString();
69-
selectedOperator = '';
70-
if (displayValue === 'NaN' || displayValue === 'Infinity') displayValue = '0';
71-
72-
this.setState({ displayValue, selectedOperator, storedValue: updateStoredValue });
69+
selectedOperator = "";
70+
if (displayValue === "NaN" || displayValue === "Infinity")
71+
displayValue = "0";
72+
73+
this.setState({
74+
displayValue,
75+
selectedOperator,
76+
storedValue: updateStoredValue
77+
});
7378
};
7479

7580
handleKeyPress = event => {
7681
const { numbers, operators } = this.state;
7782

78-
if (event.key === 'Backspace') this.updateDisplay('ce');
79-
if (event.key === 'Enter' || event.key === '=') this.callOperator();
83+
if (event.key === "Backspace") this.updateDisplay("ce");
84+
if (event.key === "Enter" || event.key === "=") this.callOperator();
8085

8186
numbers.forEach(number => {
8287
if (event.key === number) this.updateDisplay(number);
@@ -90,9 +95,9 @@ class Calculator extends Component {
9095
setOperator = value => {
9196
let { displayValue, selectedOperator, storedValue } = this.state;
9297

93-
if (selectedOperator === '') {
98+
if (selectedOperator === "") {
9499
storedValue = displayValue;
95-
displayValue = '0';
100+
displayValue = "0";
96101
selectedOperator = value;
97102
} else {
98103
selectedOperator = value;
@@ -104,13 +109,13 @@ class Calculator extends Component {
104109
updateDisplay = value => {
105110
let { displayValue } = this.state;
106111

107-
if (value === '.' && displayValue.includes('.')) value = '';
112+
if (value === "." && displayValue.includes(".")) value = "";
108113

109-
if (value === 'ce') {
114+
if (value === "ce") {
110115
displayValue = displayValue.substr(0, displayValue.length - 1);
111-
if (displayValue === '') displayValue = '0';
116+
if (displayValue === "") displayValue = "0";
112117
} else {
113-
displayValue === '0' ? (displayValue = value) : (displayValue += value);
118+
displayValue === "0" ? (displayValue = value) : (displayValue += value);
114119
}
115120

116121
this.setState({ displayValue });

‎src/components/Display/Display.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from 'react';
2-
import PropTypes from 'prop-types';
3-
import './Display.css';
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import "./Display.css";
44

55
const Display = ({ displayValue }) => (
66
<div className="display-container">
@@ -10,6 +10,6 @@ const Display = ({ displayValue }) => (
1010

1111
Display.propTypes = { displayValue: PropTypes.string.isRequired };
1212

13-
Display.defaultProps = { displayValue: 'default' };
13+
Display.defaultProps = { displayValue: "default" };
1414

1515
export default Display;

‎src/components/Key/Key.jsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1-
import React from 'react';
2-
import PropTypes from 'prop-types';
3-
import './Key.css';
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import "./Key.css";
44

55
const Key = ({ handleKeyPress, keyAction, keyType, keyValue }) => {
66
const keyClass = `key-container ${keyType}`;
77

88
return (
9-
<div className={keyClass} onClick={() => keyAction(keyValue)} onKeyPress={event => handleKeyPress(event)}>
9+
<div
10+
className={keyClass}
11+
onClick={() => keyAction(keyValue)}
12+
onKeyPress={event => handleKeyPress(event)}
13+
>
1014
<p className="key-value">{keyValue}</p>
1115
</div>
1216
);
@@ -16,12 +20,12 @@ Key.propTypes = {
1620
handleKeyPress: PropTypes.func.isRequired,
1721
keyAction: PropTypes.func.isRequired,
1822
keyType: PropTypes.string.isRequired,
19-
keyValue: PropTypes.string.isRequired,
23+
keyValue: PropTypes.string.isRequired
2024
};
2125

2226
Key.defaultProps = {
23-
keyType: 'default',
24-
keyAction: 'default',
27+
keyType: "default",
28+
keyAction: "default"
2529
};
2630

2731
export default Key;

‎src/components/Keypad/Keypad.jsx‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
1-
import React from 'react';
2-
import PropTypes from 'prop-types';
3-
import './Keypad.css';
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import "./Keypad.css";
44

5-
import Key from '../Key/Key';
6-
import './Keypad.css';
5+
import Key from "../Key/Key";
6+
import "./Keypad.css";
77

8-
const Keypad = ({ operators, callOperator, handleKeyPress, numbers, setOperator, updateDisplay }) => {
8+
const Keypad = ({
9+
operators,
10+
callOperator,
11+
handleKeyPress,
12+
numbers,
13+
setOperator,
14+
updateDisplay
15+
}) => {
916
const numberKeys = numbers.map((number, iterator) => (
1017
<Key
1118
handleKeyPress={handleKeyPress}
@@ -31,7 +38,12 @@ const Keypad = ({ operators, callOperator, handleKeyPress, numbers, setOperator,
3138
<div className="numbers-container">{numberKeys}</div>
3239
<div className="operators-container">{operatorKeys}</div>
3340
<div className="submit-container">
34-
<Key handleKeyPress={handleKeyPress} keyType="submit-key" keyValue="=" keyAction={callOperator} />
41+
<Key
42+
handleKeyPress={handleKeyPress}
43+
keyType="submit-key"
44+
keyValue="="
45+
keyAction={callOperator}
46+
/>
3547
</div>
3648
</div>
3749
);
@@ -43,12 +55,12 @@ Keypad.propTypes = {
4355
numbers: PropTypes.array.isRequired,
4456
operators: PropTypes.array.isRequired,
4557
setOperator: PropTypes.func.isRequired,
46-
updateDisplay: PropTypes.func.isRequired,
58+
updateDisplay: PropTypes.func.isRequired
4759
};
4860

4961
Keypad.defaultProps = {
5062
numbers: [],
51-
operators: [],
63+
operators: []
5264
};
5365

5466
export default Keypad;

0 commit comments

Comments
 (0)