Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 3 years ago

Tic Tac Toe Game

react
Benja.min•740
@BenjaDotMin
A solution to the Tic Tac Toe game challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


This was fun. I added some of my own twists on interaction, animation and UI. Just to give it a unique spin.

Thank you for your time!

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Mostafa Sayed•350
    @zDevtutor
    Posted over 3 years ago

    Hi @BenjaDotMin, I really like the way you built the game, especially the part of you demonstrating CPU behavior by thinking. I did use this part from your project and linked it to you on the README file of it. However, I did use vanilla javascript for building the game here. One thing I noticed in your project is that when the user wants to play vs another player it actually kind of the same as playing vs CPU. And the scoreboard is not updated like the way on the design such as when the user wants to play vs another player. I think X should be (P1) and O should be (P2) and The winning and losing messages should be Player 1 wins or Player 2 wins. May I ask you to look at the code that I have regarding building this game and the logic that I used for building it? If you have any recommendations or improvements that I could do. This will be very helpful and beneficial for me.

    Marked as helpful
  • Benja.min•740
    @BenjaDotMin
    Posted over 3 years ago

    Apologies for the preview screen, I assume its something to do with lazy loading the components in react. Pop open the site and it should be fine!

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 1st-party linked stylesheets, and styles within <style> tags.

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.

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