Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Hangman game

P
Amit-R328 150

@Amit-R328

Desktop design screenshot for the Hangman game coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

What am I most proud of:

1.Implementing Keyboard Navigation: Adding keyboard navigation to enhance the user experience.

2.Dynamic Category and Word Selection: Implementing a feature that ensures no repeated words within a session.

3.Responsive Design: Making the game responsive across different devices was a challenge, and I learned how to use mixins and @include.

4.State Management with NgRx: Successfully managing game state using NgRx Store.

What would I do differently next time:

1.Plan for Deployment Early: Understanding the requirements for deploying to GitHub Pages or any other platform early in the development process could save time and prevent last-minute issues.

2.Optimize CSS and Assets: Ensure that my SCSS and assets are optimized to avoid exceeding size budgets, which can affect performance and deployment.

3.Thorough Testing on All Platforms: Conduct more thorough testing on different devices and browsers to catch and fix issues related to responsiveness and compatibility.

4.Accessibility Enhancements: Focus more on accessibility to ensure the game is usable by a broader audience, including those with disabilities.

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

Keyboard Navigation in the Category Component:

Challenge: Implementing keyboard navigation for selecting categories was particularly challenging due to the need to manage focus and ensure a smooth user experience.

Solution: I overcame this by using Angular’s @HostListener to listen for keyboard events and dynamically setting focus on the category elements. This required a good understanding of Angular’s event handling and element manipulation.

What specific areas of your project would you like help with?

While I added keyboard navigation, there may be additional accessibility features that could make the game more inclusive, such as ARIA labels, better focus management, and support for screen readers.

I would be happy to get guidance on best practices for accessibility.

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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