Description
For a recent software engineering challenge, I needed to recreate a well-known game where a player needs to guess a 5-character word. I decided to improve my attempt and learn how to better manage state in React using nextJS. A new word is chosen every reload and gets a maximum of 5 attempts to guess the word.
Features
- A new word is selected upon every reload of the page.
- Single input field which validates whether 5 characters have been entered. Excludes entering less, or more than 5 characters.
- Submit button is disabled through state, until 5 characters are placed within the input field.
- History of word attempts are listed above the input field with green, orange and red backgrounds to inform the player that the character is at the correct location in the word (green), the character exists in the word, but is not in the correct location (yellow), or the character does not exist in the word (red).
- State keeps track of the number of attempts and whether the player has gone over the 5 attempts allowed. In which case they have lost.
- Entering the correct 5 character word changes state to remove the input and confirms to the player that they have won.
Programming Languages
The game was made using typescript and React within next.js.
Credits
- Developer: Shaun Guimond
