React Wordle Game - JavaScript Exercise #9

Overview

In this exercise, you will be building a Wordle game using React. Players are presented with a set of hidden words that they must guess by entering letters. The game is won when all words are guessed correctly.

Requirements

• The game must have a minimum of 10 hidden words.

• The game must track the number of correct and incorrect guesses.

• The game must display a message when a player has won or lost.

Instructions

1. Display a set of hidden words, each represented by underscores (e.g., "______").

2. Allow the player to enter a letter.

3. If the letter is present in one or more of the hidden words, replace the corresponding underscores with the letter.

4. If the letter is not present in any of the hidden words, mark it as an incorrect guess.

5. Allow the player to continue guessing until all words have been correctly guessed or the number of allowed incorrect guesses has been exceeded.

6. Display a message indicating whether the player has won or lost.

Bonus Requirements

• Add a reset button that allows the player to start a new game.

Before you dive into the final output, I want to encourage you to take some time to work through the exercise yourself. I believe that active learning is the most effective way to learn and grow as a developer.

So, grab a pen and paper, fire up your code editor, and get ready to dive into the React Wordle game exercise. Once you have completed the exercise, feel free to return to this blog post to compare your solution to mine.

Output for the Wordle game exercise

import React, { useState } from 'react';

const words = ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig', 'grape', 'honeydew', 'kiwi', 'lemon'];

const allowedIncorrectGuesses = 6;

const WordleGame = () => {
  const [hiddenWords, setHiddenWords] = useState(words);
  const [guesses, setGuesses] = useState([]);
  const [incorrectGuesses, setIncorrectGuesses] = useState(0);

  const handleGuess = (letter) => {
    const newGuesses = [...guesses, letter];
    setGuesses(newGuesses);

    let foundLetter = false;
    const newHiddenWords = hiddenWords.map((word) => {
      const letters = word.split('');
      const newLetters = letters.map((hiddenLetter) => {
        if (hiddenLetter === letter) {
          foundLetter = true;
          return letter;
        } else {
          return hiddenLetter;
        }
      });
      return newLetters.join('');
    });
    setHiddenWords(newHiddenWords);

    if (!foundLetter) {
      setIncorrectGuesses(incorrectGuesses + 1);
    }
  };

  const resetGame = () => {
    setHiddenWords(words);
    setGuesses([]);
    setIncorrectGuesses(0);
  };

  const gameWon = hiddenWords.every((word) => {
    return word.split('').every((letter) => {
      return guesses.includes(letter);
    });
  });

  const gameLost = incorrectGuesses >= allowedIncorrectGuesses;

  const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');

  return (
    <div>
      <h1>React Wordle</h1>
      <p>Guess the hidden words by clicking on the letters below!</p>
      {hiddenWords.map((word) => {
        return <div key={word}>{word.split('').map((letter) => {
          if (guesses.includes(letter)) {
            return letter;
          } else {
            return '_';
          }
        })}</div>;
      })}
      <p>Incorrect guesses: {incorrectGuesses}</p>
      {!gameWon && !gameLost && <div>
        {alphabet.map((letter) => {
          return <button key={letter} onClick={() => handleGuess(letter)} disabled={guesses.includes(letter)}>{letter}</button>
        })}
      </div>}
      {gameWon && <div>
        <p>Congratulations, you won!</p>
        <button onClick={resetGame}>Play Again</button>
      </div>}
      {gameLost && <div>
        <p>Sorry, you lost.</p>
        <button onClick={resetGame}>Play Again</button>
      </div>}
    </div>
  );
};

export default WordleGame;

In this exercise, we created a React Wordle game that allows players to guess hidden words by clicking on alphabet buttons. We used React state to keep track of the hidden words, the player's guesses, and the number of incorrect guesses. We also added a reset button to allow players to start a new game.

This exercise was a good introduction to using React state and conditionally rendering components based on the game state. It also gave us practice with mapping over arrays to create buttons and rendering dynamic content based on user input.

Overall, this exercise provided a fun and interactive way to learn React concepts and practically apply them. With further customization and enhancement, this game can be made even more engaging and challenging.

Thanks for taking this JavaScript exercise!

I hope you found this exercise helpful and enjoyable, and that it has deepened your understanding of React development. Keep practising and experimenting with React, and you'll be well on your way to becoming a skilled React developer!

If you have any questions or comments, feel free to reach out to me on Twitter(@rajeshtomjoe), or follow me for more updates.

And if you'd like to receive more exercise on JavaScript, be sure to subscribe to my blog.