Frontend Mentor - Hangman game solution

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.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
• Author

Overview

The challenge

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.

Links

• Solution URL: https://github.com/Olatoyan/hangman-game
• Live Site URL: https://toyan-hangman.netlify.app/

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• React and TypeScript
• TailwindCSS
• Framer

Author

• Frontend Mentor - @olatoyan
• Twitter - @Toyan