1.E.5: Guess The Word

Learning Objectives

  1. How to use forms with React and controlled components

  2. Get comfortable applying JS logic in React

Introduction

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.

Starter Code

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;

Base

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!

Comfortable

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.

More Comfortable

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.

Submission

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.

Reference Solution

Here is reference code and a reference deployment for this exercise. You can do better!

Last updated