kaylakremer · kaylakremer · Oct 24, 2021 · Oct 24, 2021
diff --git a/README.md b/README.md
@@ -1,2 +1,7 @@
-# CoderbyteReact
-My Coderbyte solutions for the React challenges
+# Coderbyte React
+
+My Coderbyte solutions for the React Interview Kit challenges.
+
+All received a 10/10 score.
+
+Feel free to use any of my solutions for yourself!
diff --git a/solutions/button-toggle.js b/solutions/button-toggle.js
@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+
+const Toggle = () => {
+
+  const [toggle, setToggle] = useState(false);
+
+  const handleClick = () => {
+    setToggle(!toggle);
+  }
+
+    return (
+      <button type="button" onClick={handleClick}>
+        {toggle ? 'ON' : 'OFF'}
+      </button>
+    );
+}
+
+ReactDOM.render(
+  <Toggle />,
+  document.getElementById('root')
+);
diff --git a/solutions/list.js b/solutions/list.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const data = [
+  { name: 'Daniel', age: 25 },
+  { name: 'John', age: 24 },
+  { name: 'Jen', age: 31 },
+];
+
+const DataItem = ({ name, age}) => {
+
+  return (
+    <li>
+      <span>{name}{` `}</span>
+      <span>{age}</span>
+    </li>
+  );
+};
+
+const DataList = () => {
+
+  return (
+    <div>
+      <h2>Data List</h2>
+      <ul>
+        {data.map((dataItem, index) => {
+          return (
+            <DataItem 
+              name={dataItem.name} 
+              age={dataItem.age} 
+              key={`data-item-${index}`} 
+            />
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+ReactDOM.render(
+  <DataList data={ data } />,
+  document.getElementById('root')
+);
diff --git a/solutions/simple-counter.js b/solutions/simple-counter.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {count: 0};
+  }
+
+  increment = () => {
+    const {count} = this.state;
+    this.setState({count: count + 1});
+  }
+
+  render() {
+    const {count} = this.state;
+    return (
+      <div id="mainArea">
+        <p>button count: <span>{count}</span></p>
+        <button onClick={this.increment} id="mainButton">Increase</button>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <Counter />,
+  document.getElementById('root')
+);
diff --git a/solutions/tic-tac-toe.js b/solutions/tic-tac-toe.js
@@ -0,0 +1,201 @@
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+
+const rowStyle = {
+  display: 'flex'
+}
+
+const squareStyle = {
+  'width':'60px',
+  'height':'60px',
+  'backgroundColor': '#ddd',
+  'margin': '4px',
+  'display': 'flex',
+  'justifyContent': 'center',
+  'alignItems': 'center',
+  'fontSize': '20px',
+  'color': 'white',
+  'cursor': 'pointer',
+}
+
+const boardStyle = {
+  'backgroundColor': '#eee',
+  'width': '208px',
+  'alignItems': 'center',
+  'justifyContent': 'center',
+  'display': 'flex',
+  'flexDirection': 'column',
+  'border': '3px #eee solid'
+}
+
+const containerStyle = {
+  'display': 'flex',
+  'alignItems': 'center',
+  'flexDirection': 'column'
+}
+
+const instructionsStyle = {
+  'marginTop': '5px',
+  'marginBottom': '5px',
+  'fontWeight': 'bold',
+  'fontSize': '16px',
+}
+
+const buttonStyle = {
+  'marginTop': '15px',
+  'marginBottom': '16px',
+  'width': '80px',
+  'height': '40px',
+  'backgroundColor': '#8acaca',
+  'color': 'white',
+  'fontSize': '16px',
+  'cursor': 'pointer',
+}
+
+const Square = ({playerXSquares, playerOSquares, handleClick, value, disabled }) => {
+  return (
+    <div
+      className="square"
+      style={squareStyle}
+      disabled={disabled}
+      value={value}
+      onClick={() => {
+        if (!disabled) {
+          handleClick(value)
+        }
+      }}
+    >
+      <span className="square-text">
+        {playerXSquares.indexOf(value) > -1 ? 'X' : playerOSquares.indexOf(value) > -1 ? 'O' : ''}
+      </span>
+    </div>
+  );
+};
+
+const Board = () => {
+  const [currentPlayer, setCurrentPlayer] = useState('player X');
+  const [winner, setWinner] = useState('None')
+  const [playerXSquares, setPlayerXSquares] = useState([]);
+  const [playerOSquares, setPlayerOSquares] = useState([]);
+
+  const handleClick = value => {
+    if (currentPlayer === 'player X') {
+      setPlayerXSquares([...playerXSquares, value]);
+      setCurrentPlayer('player O');
+    } else {
+      setPlayerOSquares([...playerOSquares, value]);
+      setCurrentPlayer('player X');
+    }
+  }
+
+  const determineWinner = (playerXSquares, playerOSquares) => {
+
+    function checkRows() {
+      if (
+      (playerXSquares.includes(0) && playerXSquares.includes(1) && playerXSquares.includes(2)) ||
+      (playerXSquares.includes(3) && playerXSquares.includes(4) && playerXSquares.includes(5)) ||
+      (playerXSquares.includes(6) && playerXSquares.includes(7) && playerXSquares.includes(8))
+      ) {
+        return setWinner('Player X');
+      }
+
+      if (
+      (playerOSquares.includes(0) && playerOSquares.includes(1) && playerOSquares.includes(2)) ||
+      (playerOSquares.includes(3) && playerOSquares.includes(4) && playerOSquares.includes(5)) ||
+      (playerOSquares.includes(6) && playerOSquares.includes(7) && playerOSquares.includes(8))
+      ) {
+        return setWinner('Player O');
+      }
+
+    }
+
+    function checkColumns() {
+      if (
+      (playerXSquares.includes(0) && playerXSquares.includes(3) && playerXSquares.includes(6)) ||
+      (playerXSquares.includes(1) && playerXSquares.includes(4) && playerXSquares.includes(7)) ||
+      (playerXSquares.includes(2) && playerXSquares.includes(5) && playerXSquares.includes(8))
+      ) {
+        return setWinner('Player X');
+      }
+
+      if (
+      (playerOSquares.includes(0) && playerOSquares.includes(3) && playerOSquares.includes(6)) ||
+      (playerOSquares.includes(1) && playerOSquares.includes(4) && playerOSquares.includes(7)) ||
+      (playerOSquares.includes(2) && playerOSquares.includes(5) && playerOSquares.includes(8))
+      ) {
+        return setWinner('Player O');
+      }
+    }
+
+    function checkDiagnols() {
+      if (playerXSquares.includes(4)) {
+        if ((playerXSquares.includes(0) && playerXSquares.includes(8)) || (playerXSquares.includes(2) && playerXSquares.includes(6))) {
+          return setWinner('Player X');
+        }
+      }
+       if (playerOSquares.includes(4)) {
+        if ((playerOSquares.includes(0) && playerOSquares.includes(8)) || (playerOSquares.includes(2) && playerOSquares.includes(6))) {
+          return setWinner('Player O');
+        }
+      }
+    }
+
+    if (winner === 'None') {
+      checkRows();
+      checkColumns();
+      checkDiagnols();
+    }
+  }
+
+
+  const reset = () => {
+    setCurrentPlayer('Player X');
+    setPlayerXSquares([]);
+    setPlayerOSquares([]);
+    setWinner('None');
+  }
+
+  useEffect(() => {
+    determineWinner(playerXSquares, playerOSquares);
+  }, [playerXSquares, playerOSquares]);
+
+  return (
+    <div style={containerStyle} className="gameBoard">
+      <div id="statusArea" className="status" style={instructionsStyle}>Next player: <span>{currentPlayer === 'Player X' ? 'Player O' : 'Player X'}</span></div>
+      <div id="winnerArea" className="winner" style={instructionsStyle}>Winner: <span>{winner}</span></div>
+      <button onClick={reset} style={buttonStyle}>Reset</button>
+      <div style={boardStyle}>
+        <div className="board-row" style={rowStyle}>
+          <Square disabled={playerXSquares.includes(0) || playerOSquares.includes(0) || winner !== 'None'} playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={0} />
+          <Square disabled={playerXSquares.includes(1) || playerOSquares.includes(1) || winner !== 'None'} playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={1} />
+          <Square disabled={playerXSquares.includes(2) || playerOSquares.includes(2) || winner !== 'None'} playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={2} />
+        </div>
+        <div className="board-row" style={rowStyle}>
+          <Square disabled={playerXSquares.includes(2) || playerOSquares.includes(3) || winner !== 'None'} playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={3} />
+          <Square disabled={playerXSquares.includes(2) || playerOSquares.includes(4) || winner !== 'None'} playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={4} />
+          <Square disabled={playerXSquares.includes(2) || playerOSquares.includes(5) || winner !== 'None'} playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={5} />
+        </div>
+        <div className="board-row" style={rowStyle}>
+          <Square disabled={playerXSquares.includes(2) || playerOSquares.includes(6) || winner !== 'None'}playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={6} />
+          <Square disabled={playerXSquares.includes(2) || playerOSquares.includes(7) || winner !== 'None'}playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={7} />
+          <Square disabled={playerXSquares.includes(2) || playerOSquares.includes(8) || winner !== 'None'} playerXSquares={playerXSquares} playerOSquares={playerOSquares} handleClick={handleClick} value={8} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Game = () => {
+  return (
+    <div className="game">
+      <div className="game-board">
+        <Board />
+      </div>
+    </div>
+  );
+};
+
+ReactDOM.render(
+  <Game />,
+  document.getElementById('root')
+);