1.E.5: Guess The Word
- 1.How to use forms with React and controlled components
- 2.Get comfortable applying JS logic in React
Guess The Word (aka Hangman) is a single-player game where a user tries to guess all letters in a secret word with a limited number of guesses. Correct guesses will reveal the instances of the guessed letter in the word. Incorrect guesses will reduce "guesses remaining". A user wins when they guess all letters in the word correctly, and loses when there are no guesses remaining.
Fork and clone Rocket's Guess The Word repo (Rocket-themed Create React App). Understand the following starter code in
App.js before creating GTW, and feel free to change anything you would like in App.js. Run npm i to install packages and npm start to start the app.For Windows:
If your React Application does not reflect saved changes in the browser please refer back to this section to enable a refresh cycle.
App.js
import React from "react";
import { getRandomWord } from "./utils.js";
import "./App.css";
class App extends React.Component {
constructor(props) {
// Always call super with props in constructor to initialise parent class
super(props);
this.state = {
// currWord is the current secret word for this round. Update this with this.setState after each round.
currWord: getRandomWord(),
// guessedLetters stores all letters a user has guessed so far
guessedLetters: [],
// Insert num guesses left state here
// Insert form input state here
};
}
generateWordDisplay = () => {
const wordDisplay = [];
// for...of is a string and array iterator that does not use index
for (let letter of this.state.currWord) {
if (this.state.guessedLetters.includes(letter)) {
wordDisplay.push(letter);
} else {
wordDisplay.push("_");
}
}
return wordDisplay.toString();
};
// Insert form callback functions handleChange and handleSubmit here
render() {
return (
<div className="App">
<header className="App-header">
<h1>Guess The Word 🚀</h1>
<h3>Word Display</h3>
{this.generateWordDisplay()}
<h3>Guessed Letters</h3>
{this.state.guessedLetters.length > 0
? this.state.guessedLetters.toString()
: "-"}
<h3>Input</h3>
{/* Insert form element here */}
Todo: Insert form element here
</header>
</div>
);
}
}
export default App;
Add a form HTML element in
App.js as per what we learned in React Forms to allow the user to input guesses. Each guess can only consist of 1 letter at a time. Control form input using component state as per the React Guide.When the user guesses a letter, add that letter to the
App component's guessedLetters state. Consider using the spread operator when adding the new letter to trigger React to re-render. The existing starter code logic will read guessedLetters and render correctly-guessed letters in the Word Display section and render all guessed letters in the Guessed Letters section.Add logic and state to track whether the user has guessed all letters of the word and how many guesses the user has left (can start with 10). If the user guesses all letters correctly, tell them they have won. If the user runs out of guesses, reveal the word and tell them they have lost. When the round ends, give the user an option to play again.
Hard-code secret word for easier testing
When testing your app, you may find it easier to hard-code the secret word initialised in state. Guessing words is hard!
Style the app to clarify what each UI component is for. Create an image that appears gradually with every wrong guess for the user to visualise how many guesses they have left. Consider using React Bootstrap or MUI components as default styles.
Allow the user to play multiple rounds and display their score across rounds, e.g. how many times they have guessed the word out of how many rounds.
Submit a pull request to the
main branch of Rocket's Guess The Word repo and share your PR link in your section Slack channel.If you would like to deploy your app to the internet, follow Create React App GitHub Pages deployment instructions here.
Last modified 1yr ago