NumberGuessingGame

src/GuessControl.js

@@ -1,47 +1,69 @@
-import React, { Component } from "react";
+// import React, { Component } from "react";
+import React, { useState } from "react";
 import Button from "./Button";
 
-class GuessControl extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      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);
-  }
-
-  handleInputChange(event) {
-    this.setState({ currentGuess: event.target.value });
-  }
-
-  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
-    this.props.onGuess(Number(this.state.currentGuess));
-    this.setState({ currentGuess: "" });
-  }
-
-  render() {
-    return (
-      <div>
-        <input
-          type="number"
-          value={this.state.currentGuess}
-          onChange={this.handleInputChange}
-        />
-        <Button onClick={this.onSubmitGuess}>Submit Guess</Button>
-      </div>
-    );
-  }
+function GuessControl({ onGuess }) {
+  const [currentGuess, setCurrentGuess] = useState("");
+
+  // class GuessControl extends Component {
+  //   constructor(props) {
+  //     super(props);
+
+  // this.state = {
+  //   currentGuess: "",
+  // };
+  const onSubmitGuess = () => {
+    onGuess(Number(currentGuess));
+    setCurrentGuess("");
+  };
+
+  /**
+   * 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);
+
+  const handleInputChange = (event) => {
+    setCurrentGuess(event.target.value);
+  };
+
+
+  // handleInputChange(event) {
+  //   // this.setState({ currentGuess: event.target.value });
+  // }
+
+  // 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
+  //   this.props.onGuess(Number(this.state.currentGuess));
+  //   this.setState({ currentGuess: "" });
+  // }
+
+
+  // render() {
+  //   return (
+  //     <div>
+  //       <input
+  //         type="number"
+  //         value={this.state.currentGuess}
+  //         onChange={this.handleInputChange}
+  //       />
+  //       <Button onClick={this.onSubmitGuess}>Submit Guess</Button>
+  //     </div>
+  //   );
+  // }
+  // }
+  // }
+  return (
+    <div>
+      <input type="number"
+        value={currentGuess} onChange={handleInputChange} />
+      <Button onClick={onSubmitGuess}> Submit Guess </Button>
+    </div>
+  );
 }
 
 export default GuessControl;

src/NumberGuessingGame.js

@@ -1,77 +1,117 @@
-import React, { Component } from "react";
+import React, { Component, 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;
-}
 
-const MAX_ATTEMPTS = 5;
 
-class NumberGuessingGame extends Component {
-  constructor(props) {
-    super(props);
+const NumberGuessingGame = () => {
+  const [numberToGuess, setNumberToGuess] = useState(getRandomNumber());
+  const [latestGuess, setLatestGuess] = useState(null);
+  const [numberOfGuesses, setNumberOfGuesses] = useState(0);
 
-    this.state = {
-      numberToGuess: getRandomNumber(),
-      numberOfGuesses: 0,
-      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);
+  function getRandomNumber() {
+    return Math.floor(Math.random() * 100) + 1;
   }
 
-  handleGuess(guess) {
-    this.setState({
-      latestGuess: guess,
-      numberOfGuesses: this.state.numberOfGuesses + 1,
-    });
-  }
 
-  handleReset() {
-    this.setState({
-      numberToGuess: getRandomNumber(),
-      numberOfGuesses: 0,
-      latestGuess: null,
-    });
+  const MAX_ATTEMPTS = 5;
+
+  const isCorrectGuess = latestGuess === numberToGuess;
+  const isGameOver = isCorrectGuess || numberOfGuesses === MAX_ATTEMPTS;
+
+  function handleGuess(guess) {
+
+    (Number(guess));
+    setNumberOfGuesses(numberOfGuesses + 1);
   }
 
-  render() {
-    const isCorrectGuess = this.state.latestGuess === this.state.numberToGuess;
-
-    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>
-    );
+  function handleReset() {
+
+    setNumberToGuess(getRandomNumber());
+    setNumberOfGuesses(0);
+    setLatestGuess(null);
+
   }
+
+
+  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} />
+      {isGameOver && (
+        <GameOver hasWon={isCorrectGuess} onReset={handleReset} />
+      )}
+      {!isGameOver && (
+        <GuessMessage
+          guess={latestGuess}
+          numberToGuess={numberToGuess}
+          numberOfGuesses={numberOfGuesses}
+        />
+      )}
+    </div>
+  );
 }
+// }
+// }
+
 
 export default NumberGuessingGame;
+
+
+
+
+
+/**
+ *
+ * Returns a random integer number from 1-100 inclusive
+ */
+// function getRandomNumber() {
+//   return Math.floor(Math.random() * 100) + 1;
+// }
+
+// const MAX_ATTEMPTS = 5;
+
+// const isCorrectGuess = latestGuess === numberToGuess;
+// const isGameOver = isCorrectGuess || numberOfGuesses === MAX_ATTEMPTS;
+// const handleGuess = (guess) => {
+//   setLatestGuess(Number(guess));
+//   setNumberOfGuesses(numberOfGuesses + 1);
+// };
+// class NumberGuessingGame extends Component {
+//   constructor(props) {
+//     super(props);
+
+//     this.state = {
+//       numberToGuess: getRandomNumber(),
+//       numberOfGuesses: 0,
+//       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);
+// }
+
+// function handleGuess (guess) {
+// setLatestGuess (guess);
+// setnumberOfGuesses (numberOfGuesses + 1);
+//  }
+
+  // function getRandomNumber() {
+  //   return
+  //   Math.floor(Math.random() * 100) + 1;
+  // }
+
+  // render() {
+  //   const isCorrectGuess = this.state.latestGuess === this.state.numberToGuess;
+
+  //   const isGameOver =
+  //     isCorrectGuess || this.state.numberOfGuesses === MAX_ATTEMPTS;
+
+