Skip to content
Submitted over 1 year ago

Matching pairs game using React.js and styled-components

react, styled-components
Anna•190
@aproskur
A solution to the Memory game challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I used styled components for the first time. Next time I'll minimize the use of unnecessary nested styled components, preferring instead to style simple tags within them. Overall, I liked the flexibility styled components offered for dynamically changing styles.

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

Ensuring responsive design for both small and large screens presented the most significant challenges for me

Code

Please log in to post a comment

Log in

Community feedback

  • Grzegorz Sterczewski•680
    @gsterczewski

    Hey Anna congratulations on completing this challenge 👏.

    I noticed a few things you could improve, I'll address a few of them.

    • On the desktop I see an unnecessary horizontal scrollbar. This is because you set overflow:scroll in the page_gameContainer... class. Removing this rule should solve this particular problem.
    • Consider adding height:100% to body and perhaps page_gameContainer to fill 100% of the height on the desktop.
    • You may also want to consider using button instead of div for clickable elements, this will improve accessibility and allow the game to be controlled using the keyboard.

    Once again, congratulations on your work. Best of luck!

    Marked as helpful

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