Completed Lesson-2-1

package.json

@@ -1,11 +1,15 @@
 {
-  "name": "number-guesser",
+  "name": "my-app",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3"
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -1,3 +1,3 @@
 .App {
   text-align: center;
-}
+}

src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/Button.js

@@ -1,13 +1,13 @@
 const buttonStyle = {
-  margin: "1em",
-  borderRadius: "5px",
-  minHeight: "2em",
-};
-
-export default function Button({ onClick, children }) {
-  return (
-    <button style={buttonStyle} onClick={onClick}>
-      {children}
-    </button>
-  );
-}
+    margin: "1em",
+    borderRadius: "5px",
+    minHeight: "2em",
+  };
+  
+  export default function Button({ onClick, children, onKeyDown}) {
+    return (
+      <button style={buttonStyle} onClick={onClick} onKeyDown={onKeyDown}>
+        {children}
+      </button>
+    );
+  }

src/GameOver.js

@@ -1,12 +1,15 @@
 import Button from "./Button";
 
-function GameOver({ hasWon, onReset }) {
+function GameOver({ hasWon, onReset, numberToGuess, onKeyDown}) {
+
   return (
     <div>
       {hasWon && <h2>Congratulation! You guessed my number.</h2>}
       {!hasWon && (
         <h2>You didn't guess my number. Would you like to try again?</h2>
       )}
+      <h1>The number was {numberToGuess}!</h1>
+      <input onKeyDown={onKeyDown}/>
       <Button onClick={onReset}>Play Again!</Button>
     </div>
   );

src/GuessControl.js

@@ -1,6 +1,7 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import Button from "./Button";
 
+/**
 class GuessControl extends Component {
   constructor(props) {
     super(props);
@@ -9,10 +10,10 @@ class GuessControl extends Component {
       currentGuess: "",
     };
 
-    /**
+
      * These lines are required to make the methods/functions declared on this
      *  class have the correct `this` object when they run.
-     */
+
     this.handleInputChange = this.handleInputChange.bind(this);
     this.onSubmitGuess = this.onSubmitGuess.bind(this);
   }
@@ -31,17 +32,34 @@ class GuessControl extends Component {
   }
 
   render() {
-    return (
-      <div>
-        <input
-          type="number"
-          value={this.state.currentGuess}
-          onChange={this.handleInputChange}
-        />
-        <Button onClick={this.onSubmitGuess}>Submit Guess</Button>
-      </div>
-    );
+**/
+export default function GuessControl (props) {
+
+  const [currentGuess, setCurrentGuess] = useState("");
+  const {onGuess, onKeyDown} = props;
+
+  const handleInputChange = (event) => {
+    setCurrentGuess(event.target.value);
+  }
+
+  const onSubmitGuess = () => {
+    // Since the values from an HTML input are strings by default,
+    //  convert to a number for the returned guess value
+    //  by passing in the string to the Number function.
+    // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
+    onGuess(Number(currentGuess));
+    setCurrentGuess("");
   }
-}
 
-export default GuessControl;
+  return (
+    <div>
+      <input
+        type="number"
+        value={currentGuess}
+        onChange={handleInputChange}
+        onKeyDown={(event) => {onKeyDown(event, onSubmitGuess)}}
+      />
+      <Button onClick={onSubmitGuess}>Submit Guess</Button>
+    </div>
+  );
+}

src/GuessMessage.js

@@ -1,27 +1,28 @@
 function getGuessMessage(guess, numberToGuess) {
-  const distanceApart = Math.abs(numberToGuess - guess);
-  if (guess < numberToGuess) {
-    if (distanceApart > 10) {
-      return "Your guess was well below the number.";
+    const distanceApart = Math.abs(numberToGuess - guess);
+    if (guess < numberToGuess) {
+      if (distanceApart > 10) {
+        return "Your guess was well below the number.";
+      } else {
+        return "Your guess was a little below the number.";
+      }
     } else {
-      return "Your guess was a little below the number.";
-    }
-  } else {
-    if (distanceApart > 10) {
-      return "Your guess was well above the number.";
-    } else {
-      return "Your guess was a little above the number.";
+      if (distanceApart > 10) {
+        return "Your guess was well above the number.";
+      } else {
+        return "Your guess was a little above the number.";
+      }
     }
   }
-}
-
-function GuessMessage({ guess, numberToGuess, numberOfGuesses }) {
-  return (
-    <div>
-      {guess && <p>{getGuessMessage(guess, numberToGuess)}</p>}
-      <p>Guesses so far: {numberOfGuesses}</p>
-    </div>
-  );
-}
-
-export default GuessMessage;
+  
+  function GuessMessage({ guess, numberToGuess, numberOfGuesses }) {
+    return (
+      <div>
+        {guess && <p>{getGuessMessage(guess, numberToGuess)}</p>}
+        <p>Guesses so far: {numberOfGuesses}</p>
+      </div>
+    );
+  }
+  
+  export default GuessMessage;
+  

src/NumberGuessingGame.js

@@ -1,12 +1,12 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import GuessControl from "./GuessControl";
 import GuessMessage from "./GuessMessage";
 import GameOver from "./GameOver";
 
 /**
  *
  * Returns a random integer number from 1-100 inclusive
- */
+
 function getRandomNumber() {
   return Math.floor(Math.random() * 100) + 1;
 }
@@ -23,10 +23,10 @@ class NumberGuessingGame extends Component {
       latestGuess: null,
     };
 
-    /**
+
      * These lines are required to make the methods/functions declared on this
      *  class have the correct `this` object when they run.
-     */
+
     this.handleGuess = this.handleGuess.bind(this);
     this.handleReset = this.handleReset.bind(this);
   }
@@ -52,26 +52,64 @@ class NumberGuessingGame extends Component {
     const isGameOver =
       isCorrectGuess || this.state.numberOfGuesses === MAX_ATTEMPTS;
 
-    return (
-      <div>
-        <h2>I'm thinking of a number from 1 to 100.</h2>
-        <h2>
-          Can you guess the number I am thinking of in {MAX_ATTEMPTS} tries?
-        </h2>
-        <GuessControl onGuess={this.handleGuess} />
-        {isGameOver && (
-          <GameOver hasWon={isCorrectGuess} onReset={this.handleReset} />
-        )}
-        {!isGameOver && (
-          <GuessMessage
-            guess={this.state.latestGuess}
-            numberToGuess={this.state.numberToGuess}
-            numberOfGuesses={this.state.numberOfGuesses}
-          />
-        )}
-      </div>
-    );
+    **/
+
+export default function NumberGuessingGame () {
+
+  function getRandomNumber() {
+    return Math.floor(Math.random() * 100) + 1;
   }
-}
 
-export default NumberGuessingGame;
+  const MAX_ATTEMPTS = 5;
+
+  const [numberToGuess, setNumberToGuess] = useState(getRandomNumber());
+  const [numberOfGuesses, setNumberOfGuesses] = useState(0);
+  const [latestGuess, setLatestGuess] = useState(null);
+
+  const handleGuess = (guess) => {
+    setLatestGuess(guess);
+    setNumberOfGuesses(numberOfGuesses + 1);
+  }
+
+  const handleReset = () => {
+    setNumberToGuess (getRandomNumber());
+    setNumberOfGuesses(0);
+    setLatestGuess(null)
+  }
+
+  const handleKeyDown = (event, submit) => {
+    if(event.key === 'Enter') {
+      isGameOver ? handleReset() : submit();
+    }
+  }
+
+  const isCorrectGuess = latestGuess === numberToGuess;
+
+  const isGameOver =
+    isCorrectGuess || numberOfGuesses === MAX_ATTEMPTS;
+
+  return (
+    <div>
+      <h2>I'm thinking of a number from 1 to 100.</h2>
+      <h2>
+        Can you guess the number I am thinking of in {MAX_ATTEMPTS} tries?
+      </h2>
+      <GuessControl onGuess={handleGuess} onKeyDown ={handleKeyDown}/>
+      {isGameOver && (
+        <GameOver 
+          hasWon={isCorrectGuess} 
+          onReset={handleReset} 
+          numberToGuess={numberToGuess}
+          onKeyDown ={handleKeyDown} 
+        />
+      )}
+      {!isGameOver && (
+        <GuessMessage
+          guess={latestGuess}
+          numberToGuess={numberToGuess}
+          numberOfGuesses={numberOfGuesses}
+        />
+      )}
+    </div>
+  );
+}

src/index.js

@@ -1,11 +1,13 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
+
+

src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';