Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

Dynamic Hangman: React, TypeScript & Responsive CSS

accessibility, react, sass/scss, typescript, animation
Curtis•930
@webguy83
A solution to the Hangman game challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

Creating this was an adventure filled with a blend of coding challenges and a healthy dose of fun, offering a distinctly different experience from my previous project, the Connect Four game challenge. Diving into React Spring, I initially aimed to animate the traditional hangman but ended up making letterboxes dance responsively to user interactions instead. This twist was entertaining, though I found myself missing the grappling with the iconic hangman figure. A tip for the Figma designers for next time: including an actual hangman drawing could add an intriguing layer of engagement! Meanwhile, mastering the CSS clamp() function was like conducting an orchestra of responsive letters across devices, ensuring harmony from smartphones to desktops.

This project also presented an unexpected scenario not covered in the initial design—what to do when players exhaust all 30 words in a category? I tackled this by resetting the word list, keeping the gameplay alive and kicking. Compared to the complexity of building Connect Four, this challenge was a breeze, yet it pushed me to think on my feet, particularly about maintaining engagement over time. While the absence of a hangman figure left me slightly frustrated, it sparked my creativity to reimagine this classic. As I reflect, I’m buoyed by the thought of tackling more game projects in the future, diving deeper into web animations and honing my inclusive design skills. Here's to the road ahead, filled with more coding adventures that fuse imagination with tech, and fingers crossed for challenges that bring back the thrill of sketching that elusive hangman.

What challenges did you encounter, and how did you overcome them?

I encountered several challenges that tested my problem-solving skills and pushed my understanding of web development. One significant hurdle was managing the game's state effectively. React's state management system required careful planning to track the game's progress, the players' guesses, and the health system dynamically. As the complexity of the game grew, it underscored the potential need for a more robust state management system for future projects. This experience has piqued my interest in exploring state management libraries like Redux or Context API in React to streamline state handling in complex applications.

Another challenge was ensuring that the letterboxes were responsive and displayed correctly across various devices. Initially, I struggled with letterboxes that wouldn't align properly or text that wouldn't fit within the designated areas on smaller screens. This led me to delve deeper into CSS techniques, where I leveraged the power of flexbox for alignment and grid for layout, along with CSS properties like clamp() for responsive typography. Through experimentation and applying CSS tricks, I was able to achieve a fluid and adaptive design that gracefully handled wrapping lines and scaling issues, ensuring a seamless user experience regardless of the device.

These challenges were valuable learning opportunities, highlighting the importance of adaptability and continuous learning in web development. Overcoming these obstacles not only enhanced the functionality and aesthetics of the Hangman game but also expanded my toolkit of coding techniques and strategies for tackling future projects.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Curtis's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.