This is a solution to the Hangman game challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Learn how to play Hangman from the main menu.
- Start a game and choose a category.
- Play Hangman with a random word selected from that category.
- See their current health decrease based on incorrect letter guesses.
- Win the game if they complete the whole word.
- Lose the game if they make eight wrong guesses.
- Pause the game and choose to continue, pick a new category, or quit.
- View the optimal layout for the interface depending on their device's screen size.
- See hover and focus states for all interactive elements on the page.
- Navigate the entire game only using their keyboard.
- Next js - React Framework
- Open AI - Text generation models
- reCAPTCHA - website protector against spam and abuse.
In the Next.js section, I gained knowledge on how to manage the 'api' folder to create a REST API efficiently. As for OpenAI, I explored creating custom prompts and setting parameters to get accurate responses according to my expectations.
My goal is to improve the interactivity of the game so that the user can fully navigate using only the keyboard.
rename .env.example
mv .env.example .env.localadds the open ai api key and recaptcha tokens to the environment:
- open ai: link
- recaptcha: link
- url recaptcha endpoint (
URL_CAPTCHA):https://www.google.com/recaptcha/api/siteverify
install dependencies and run the development server:
yarn && yarn dev- Website - g1alexander.com
- Frontend Mentor - @g1alexander
- Twitter - @g1alexander_