Skip to content

Commit aeaa951

Browse files
kaylakremerkaylakremer
authored
Merge pull request #2 from KaylaKremer/refactor
Refactor
2 parents 16805d3 + 01139d5 commit aeaa951

File tree

3 files changed

+88
-35
lines changed

3 files changed

+88
-35
lines changed

‎solutions/button-toggle.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ const Toggle = () => {
77

88
const handleClick = () => {
99
setToggle(!toggle);
10-
}
10+
};
1111

1212
return (
1313
<button type="button" onClick={handleClick}>
1414
{toggle ? 'ON' : 'OFF'}
1515
</button>
1616
);
17-
}
17+
};
1818

1919
ReactDOM.render(
2020
<Toggle />,

‎solutions/simple-counter.js

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import ReactDOM from 'react-dom';
33

4-
class Counter extends React.Component {
5-
constructor(props) {
6-
super(props);
7-
this.state = {count: 0};
8-
}
4+
const Counter = () => {
5+
const [count, setCount] = useState(0);
96

107
increment = () => {
11-
const {count} = this.state;
12-
this.setState({count: count + 1});
13-
}
8+
setCount(prevCount => prevCount + 1);
9+
};
1410

15-
render() {
16-
const {count} = this.state;
17-
return (
18-
<div id="mainArea">
19-
<p>button count: <span>{count}</span></p>
20-
<button onClick={this.increment} id="mainButton">Increase</button>
21-
</div>
22-
);
23-
}
24-
}
11+
return (
12+
<div id="mainArea">
13+
<p>
14+
Button Count:
15+
<span>{count}</span>
16+
</p>
17+
<button
18+
onClick={increment}
19+
id="mainButton"
20+
>
21+
Increase
22+
</button>
23+
</div>
24+
);
25+
};
2526

2627
ReactDOM.render(
2728
<Counter />,

‎solutions/tic-tac-toe.js

Lines changed: 66 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,6 @@ const Board = () => {
8989
}
9090

9191
const determineWinner = (playerXSquares, playerOSquares) => {
92-
9392
function checkRows() {
9493
if (
9594
(playerXSquares.includes(0) && playerXSquares.includes(1) && playerXSquares.includes(2)) ||
@@ -106,7 +105,6 @@ const Board = () => {
106105
) {
107106
return setWinner('Player O');
108107
}
109-
110108
}
111109

112110
function checkColumns() {
@@ -127,13 +125,13 @@ const Board = () => {
127125
}
128126
}
129127

130-
function checkDiagnols() {
128+
function checkDiagonals() {
131129
if (playerXSquares.includes(4)) {
132130
if ((playerXSquares.includes(0) && playerXSquares.includes(8)) || (playerXSquares.includes(2) && playerXSquares.includes(6))) {
133131
return setWinner('Player X');
134132
}
135133
}
136-
if (playerOSquares.includes(4)) {
134+
if (playerOSquares.includes(4)) {
137135
if ((playerOSquares.includes(0) && playerOSquares.includes(8)) || (playerOSquares.includes(2) && playerOSquares.includes(6))) {
138136
return setWinner('Player O');
139137
}
@@ -143,7 +141,7 @@ const Board = () => {
143141
if (winner === 'None') {
144142
checkRows();
145143
checkColumns();
146-
checkDiagnols();
144+
checkDiagonals();
147145
}
148146
}
149147

@@ -166,19 +164,73 @@ const Board = () => {
166164
<button onClick={reset} style={buttonStyle}>Reset</button>
167165
<div style={boardStyle}>
168166
<div className="board-row" style={rowStyle}>
169-
<Square disabled={playerXSquares.includes(0) || playerOSquares.includes(0) || winner !== 'None'} playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={0} />
170-
<Square disabled={playerXSquares.includes(1) || playerOSquares.includes(1) || winner !== 'None'} playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={1} />
171-
<Square disabled={playerXSquares.includes(2) || playerOSquares.includes(2) || winner !== 'None'} playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={2} />
167+
<Square
168+
disabled={playerXSquares.includes(0) || playerOSquares.includes(0) || winner !== 'None'}
169+
playerXSquares={playerXSquares}
170+
playerOSquares={playerOSquares}
171+
handleClick={handleClick}
172+
value={0}
173+
/>
174+
<Square
175+
disabled={playerXSquares.includes(1) || playerOSquares.includes(1) || winner !== 'None'}
176+
playerXSquares={playerXSquares}
177+
playerOSquares={playerOSquares}
178+
handleClick={handleClick}
179+
value={1}
180+
/>
181+
<Square
182+
disabled={playerXSquares.includes(2) || playerOSquares.includes(2) || winner !== 'None'}
183+
playerXSquares={playerXSquares}
184+
playerOSquares={playerOSquares}
185+
handleClick={handleClick}
186+
value={2}
187+
/>
172188
</div>
173189
<div className="board-row" style={rowStyle}>
174-
<Square disabled={playerXSquares.includes(2) || playerOSquares.includes(3) || winner !== 'None'} playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={3} />
175-
<Square disabled={playerXSquares.includes(2) || playerOSquares.includes(4) || winner !== 'None'} playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={4} />
176-
<Square disabled={playerXSquares.includes(2) || playerOSquares.includes(5) || winner !== 'None'} playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={5} />
190+
<Square
191+
disabled={playerXSquares.includes(2) || playerOSquares.includes(3) || winner !== 'None'}
192+
playerXSquares={playerXSquares}
193+
playerOSquares={playerOSquares}
194+
handleClick={handleClick}
195+
value={3}
196+
/>
197+
<Square
198+
disabled={playerXSquares.includes(2) || playerOSquares.includes(4) || winner !== 'None'}
199+
playerXSquares={playerXSquares}
200+
playerOSquares={playerOSquares}
201+
handleClick={handleClick}
202+
value={4}
203+
/>
204+
<Square
205+
disabled={playerXSquares.includes(2) || playerOSquares.includes(5) || winner !== 'None'}
206+
playerXSquares={playerXSquares}
207+
playerOSquares={playerOSquares}
208+
handleClick={handleClick}
209+
value={5}
210+
/>
177211
</div>
178212
<div className="board-row" style={rowStyle}>
179-
<Square disabled={playerXSquares.includes(2) || playerOSquares.includes(6) || winner !== 'None'}playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={6} />
180-
<Square disabled={playerXSquares.includes(2) || playerOSquares.includes(7) || winner !== 'None'}playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={7} />
181-
<Square disabled={playerXSquares.includes(2) || playerOSquares.includes(8) || winner !== 'None'} playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={8} />
213+
<Square
214+
disabled={playerXSquares.includes(2) || playerOSquares.includes(6) || winner !== 'None'}
215+
playerXSquares={playerXSquares}
216+
playerOSquares={playerOSquares}
217+
handleClick={handleClick}
218+
value={6}
219+
/>
220+
<Square
221+
disabled={playerXSquares.includes(2) || playerOSquares.includes(7) || winner !== 'None'}
222+
playerXSquares={playerXSquares}
223+
playerOSquares={playerOSquares}
224+
handleClick={handleClick}
225+
value={7}
226+
/>
227+
<Square
228+
disabled={playerXSquares.includes(2) || playerOSquares.includes(8) || winner !== 'None'}
229+
playerXSquares={playerXSquares}
230+
playerOSquares={playerOSquares}
231+
handleClick={handleClick}
232+
value={8}
233+
/>
182234
</div>
183235
</div>
184236
</div>

0 commit comments

Comments
 (0)