Hangman

The classic Hangman game, made with React + TypeScript.

Table of contents

• Screenshot
• Links
• Built with
• What I learned
• Author

Screenshot

Links

• Live Site URL: Hangman Live Site, hosted with Firebase Hosting

Built with

• TypeScript
• React
• Vite
• CSS

What I learned

• Practiced Event delegation when implementing the Keyboard component. Instead of having an event listener for click or press of each button, corresponding to each letter of the alphabet, I delegated said events to a single event listener per action - one for clicking the keyboard buttons on screen and one for pressing your PC's keyboard buttons.

Full Hangman Keyboard code available inside the Keyboard.tsx file.

• Instead of relying on an image and waiting for it to load each time a different part of the Hangman graphic must be displayed, I simply built the whole graphic with CSS. The graphic is always loaded, but it is hidden by default. The different parts are displayed whenever a wrong letter is guessed.

Full code available inside HangmanGraphic.tsx.

Author

• LinkedIn - Viktor Kolev
• Email - viktorkolev0707@gmail.com