From a23d6d3a88ff46392718065472e27f37291f7b19 Mon Sep 17 00:00:00 2001 From: rixiobarrios Date: Sun, 11 Sep 2022 12:19:14 -0500 Subject: [PATCH 1/3] Add new file from previous work --- package-lock.json | 34 +++++++++++--- src/GuessControl.js | 109 +++++++++++++++++++++++++++++--------------- 2 files changed, 99 insertions(+), 44 deletions(-) diff --git a/package-lock.json b/package-lock.json index 33e2a1b..19a2d7e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3684,6 +3684,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/ansi-escapes/node_modules/type-fest": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", + "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/ansi-html": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz", @@ -18538,9 +18549,11 @@ } }, "node_modules/type-fest": { - "version": "0.21.3", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", - "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz", + "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==", + "optional": true, + "peer": true, "engines": { "node": ">=10" }, @@ -23446,6 +23459,13 @@ "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==", "requires": { "type-fest": "^0.21.3" + }, + "dependencies": { + "type-fest": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", + "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==" + } } }, "ansi-html": { @@ -34973,9 +34993,11 @@ "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==" }, "type-fest": { - "version": "0.21.3", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", - "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==" + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz", + "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==", + "optional": true, + "peer": true }, "type-is": { "version": "1.6.18", diff --git a/src/GuessControl.js b/src/GuessControl.js index 64108b5..3a6f0be 100644 --- a/src/GuessControl.js +++ b/src/GuessControl.js @@ -1,47 +1,80 @@ -import React, { Component } from "react"; -import Button from "./Button"; +import React, { useState } from 'react'; +import Button from './Button'; -class GuessControl extends Component { - constructor(props) { - super(props); +// Create a new function component called GuessControl that will take an onGuess prop. +const GuessControl = ({ onGuess }) => { + // Create a new state variable named currentGuess with setter setCurrentGuess and default value of an empty string. + const [currentGuess, setCurrentGuess] = useState(''); + // Set the value property for the input element to refer to this state value. (Make sure to import useState) - this.state = { - currentGuess: "", - }; + // Copy the return value from the render function in the class component to be the return value in the new function component. + return ( +
+ + +
+ ); + + //Rename the current GuessControl class to GuessControlOld if you want to keep it a reference while converting the code. + // class GuessControlOld 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 ( -
- - -
- ); - } -} + // this.handleInputChange = this.handleInputChange.bind(this); + // this.onSubmitGuess = this.onSubmitGuess.bind(this); + // } + + // handleInputChange(event) { + // this.setState({ currentGuess: event.target.value }); + // } + + // Create a handleInputChange function within the component that updates the currentGuess state value when the user changes the value in the input. Set the onChange property for the input element to refer to this function. + function handleInputChange(event) { + setCurrentGuess(event.target.value); + } + + // Create a onSubmitGuess function that calls the onGuess prop with the currentGuess value converted to a number and also resets the currentGuess to an empty string when it is called. Set the onClick property on the button to refer to this function. + + function onSubmitGuess() { + onGuess(Number(currentGuess)); + setCurrentGuess(''); + } +}; + +// 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 ( +//
+// +// +//
+// ); +// } +// } export default GuessControl; From 7bc02b21a5d882b45383d999ca0e25359010e4d8 Mon Sep 17 00:00:00 2001 From: rixiobarrios Date: Sun, 11 Sep 2022 15:29:26 -0500 Subject: [PATCH 2/3] Updated file NumberGuessingGame --- src/NumberGuessingGame.js | 175 +++++++++++++++++++++++++------------- 1 file changed, 114 insertions(+), 61 deletions(-) diff --git a/src/NumberGuessingGame.js b/src/NumberGuessingGame.js index 07c5a24..1a253c6 100644 --- a/src/NumberGuessingGame.js +++ b/src/NumberGuessingGame.js @@ -1,77 +1,130 @@ -import React, { Component } from "react"; -import GuessControl from "./GuessControl"; -import GuessMessage from "./GuessMessage"; -import GameOver from "./GameOver"; +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; + return Math.floor(Math.random() * 100) + 1; } const MAX_ATTEMPTS = 5; -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); - } - - handleGuess(guess) { - this.setState({ - latestGuess: guess, - numberOfGuesses: this.state.numberOfGuesses + 1, - }); - } - - handleReset() { - this.setState({ - numberToGuess: getRandomNumber(), - numberOfGuesses: 0, - latestGuess: null, - }); - } - - render() { - const isCorrectGuess = this.state.latestGuess === this.state.numberToGuess; - - const isGameOver = - isCorrectGuess || this.state.numberOfGuesses === MAX_ATTEMPTS; +// Create a new function component called NumberGuessingGame. +function NumberGuessingGame() { + // Create 3 state variables and their setters for numberToGuess, numberOfGuesses, and latestGuess and initialize them to the same values from the class component version. (Make sure to import useState) + const [numberToGuess, setNumberToGuess] = useState(getRandomNumber()); + const [numberOfGuesses, setNumberOfGuesses] = useState(0); + const [latestGuess, setLatestGuess] = useState(null); + + // Create a handleGuess function that will be passed in to the GuessControl component as the onGuess prop. This function should take the guess as an argument and set the latestGuess state with the guess (converted to a number using the Number function) and increment the numberOfGuesses state. + function handleGuess(guess) { + setLatestGuess(Number(guess)); + setNumberOfGuesses(numberOfGuesses + 1); + } + + // Create a handleReset function within the component that resets all 3 of the state properties the same way the handleReset function from the class component reset them. Pass this function to the GameOver component as the onReset prop. + function handleReset() { + setNumberToGuess(getRandomNumber()); + setNumberOfGuesses(0); + setLatestGuess(null); + } + // Copy the logic and return value from the render function in the class component to be in the new function component. Remove any references to this. since those will be replaced with new references. + // Update all references from the class component that referred to this. to refer to the correct variable or function for the new function component. + const isCorrectGuess = latestGuess === numberToGuess; + + const isGameOver = isCorrectGuess || numberOfGuesses === MAX_ATTEMPTS; return ( -
-

I'm thinking of a number from 1 to 100.

-

- Can you guess the number I am thinking of in {MAX_ATTEMPTS} tries? -

- - {isGameOver && ( - - )} - {!isGameOver && ( - - )} -
+
+

I'm thinking of a number from 1 to 100.

+

+ Can you guess the number I am thinking of in {MAX_ATTEMPTS}{' '} + tries? +

+ + {isGameOver && ( + + )} + {!isGameOver && ( + + )} +
); - } } +// Rename the current NumberGuessingGame class to NumberGuessingGameOld if you want to keep it a reference while converting the code. +// class NumberGuessingGameOld 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); +// } + +// handleGuess(guess) { +// this.setState({ +// latestGuess: guess, +// numberOfGuesses: this.state.numberOfGuesses + 1, +// }); +// } + +// handleReset() { +// this.setState({ +// numberToGuess: getRandomNumber(), +// numberOfGuesses: 0, +// latestGuess: null, +// }); +// } + +// render() { +// const isCorrectGuess = +// this.state.latestGuess === this.state.numberToGuess; + +// const isGameOver = +// isCorrectGuess || this.state.numberOfGuesses === MAX_ATTEMPTS; + +// return ( +//
+//

I'm thinking of a number from 1 to 100.

+//

+// Can you guess the number I am thinking of in {MAX_ATTEMPTS}{' '} +// tries? +//

+// +// {isGameOver && ( +// +// )} +// {!isGameOver && ( +// +// )} +//
+// ); +// } +// } + export default NumberGuessingGame; From 6a99baf826d5e21463370d09689ce47739f8891f Mon Sep 17 00:00:00 2001 From: rixiobarrios Date: Sun, 11 Sep 2022 15:31:58 -0500 Subject: [PATCH 3/3] Assignment completed --- src/GuessControl.js | 54 ---------------------------- src/NumberGuessingGame.js | 75 +-------------------------------------- 2 files changed, 1 insertion(+), 128 deletions(-) diff --git a/src/GuessControl.js b/src/GuessControl.js index 3a6f0be..1b56882 100644 --- a/src/GuessControl.js +++ b/src/GuessControl.js @@ -1,18 +1,12 @@ import React, { useState } from 'react'; import Button from './Button'; -// Create a new function component called GuessControl that will take an onGuess prop. const GuessControl = ({ onGuess }) => { - // Create a new state variable named currentGuess with setter setCurrentGuess and default value of an empty string. const [currentGuess, setCurrentGuess] = useState(''); - // Set the value property for the input element to refer to this state value. (Make sure to import useState) - - // Copy the return value from the render function in the class component to be the return value in the new function component. return (
@@ -20,61 +14,13 @@ const GuessControl = ({ onGuess }) => {
); - //Rename the current GuessControl class to GuessControlOld if you want to keep it a reference while converting the code. - // class GuessControlOld 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 }); - // } - - // Create a handleInputChange function within the component that updates the currentGuess state value when the user changes the value in the input. Set the onChange property for the input element to refer to this function. function handleInputChange(event) { setCurrentGuess(event.target.value); } - - // Create a onSubmitGuess function that calls the onGuess prop with the currentGuess value converted to a number and also resets the currentGuess to an empty string when it is called. Set the onClick property on the button to refer to this function. - function onSubmitGuess() { onGuess(Number(currentGuess)); setCurrentGuess(''); } }; -// 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 ( -//
-// -// -//
-// ); -// } -// } - export default GuessControl; diff --git a/src/NumberGuessingGame.js b/src/NumberGuessingGame.js index 1a253c6..68c9aee 100644 --- a/src/NumberGuessingGame.js +++ b/src/NumberGuessingGame.js @@ -13,29 +13,23 @@ function getRandomNumber() { const MAX_ATTEMPTS = 5; -// Create a new function component called NumberGuessingGame. function NumberGuessingGame() { - // Create 3 state variables and their setters for numberToGuess, numberOfGuesses, and latestGuess and initialize them to the same values from the class component version. (Make sure to import useState) const [numberToGuess, setNumberToGuess] = useState(getRandomNumber()); const [numberOfGuesses, setNumberOfGuesses] = useState(0); const [latestGuess, setLatestGuess] = useState(null); - // Create a handleGuess function that will be passed in to the GuessControl component as the onGuess prop. This function should take the guess as an argument and set the latestGuess state with the guess (converted to a number using the Number function) and increment the numberOfGuesses state. function handleGuess(guess) { setLatestGuess(Number(guess)); setNumberOfGuesses(numberOfGuesses + 1); } - // Create a handleReset function within the component that resets all 3 of the state properties the same way the handleReset function from the class component reset them. Pass this function to the GameOver component as the onReset prop. function handleReset() { setNumberToGuess(getRandomNumber()); setNumberOfGuesses(0); setLatestGuess(null); } - // Copy the logic and return value from the render function in the class component to be in the new function component. Remove any references to this. since those will be replaced with new references. - // Update all references from the class component that referred to this. to refer to the correct variable or function for the new function component. - const isCorrectGuess = latestGuess === numberToGuess; + const isCorrectGuess = latestGuess === numberToGuess; const isGameOver = isCorrectGuess || numberOfGuesses === MAX_ATTEMPTS; return ( @@ -60,71 +54,4 @@ function NumberGuessingGame() { ); } -// Rename the current NumberGuessingGame class to NumberGuessingGameOld if you want to keep it a reference while converting the code. -// class NumberGuessingGameOld 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); -// } - -// handleGuess(guess) { -// this.setState({ -// latestGuess: guess, -// numberOfGuesses: this.state.numberOfGuesses + 1, -// }); -// } - -// handleReset() { -// this.setState({ -// numberToGuess: getRandomNumber(), -// numberOfGuesses: 0, -// latestGuess: null, -// }); -// } - -// render() { -// const isCorrectGuess = -// this.state.latestGuess === this.state.numberToGuess; - -// const isGameOver = -// isCorrectGuess || this.state.numberOfGuesses === MAX_ATTEMPTS; - -// return ( -//
-//

I'm thinking of a number from 1 to 100.

-//

-// Can you guess the number I am thinking of in {MAX_ATTEMPTS}{' '} -// tries? -//

-// -// {isGameOver && ( -// -// )} -// {!isGameOver && ( -// -// )} -//
-// ); -// } -// } - export default NumberGuessingGame;