Wordle Clone is a replication of the popular word-guessing game.
- Accelerated UI development with
Tailwind CSS
. - Enhanced user interaction by adding non-blocking alerts with
React-Hot-Toast
. - Boosted type safety to reduce runtime errors with
TypeScript
. - Implemented state management with
useReducer
.
Base
- React / Vite
- Tailwind
- ESLint
- TypeScript
Libraries
- react-hot-toast
- After entering five letters, a player's guess will be compared to the answer.
-
When the guess does not match any letters in the answer, the puzzle pieces turn gray.
-
When a letter in the guess matches the answer, but the positions are different, the puzzle piece turns yellow.
-
When a letter in the guess matches the answer, and the position is correct, the puzzle piece turns green.
-
Each game allows the player to guess 6 times at most. If the 6th guess is wrong, a toast saying "答錯了! 再挑戰一次!" would appear; If the guess is correct, a toast saying "答對了,恭喜!" would appear.