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

Vanilla JS, arrays, style.csstext, localStorage, let, closures

Leopoldiniβ€’ 180

@LShiznit

Desktop design screenshot for the Tic Tac Toe game coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Organization was very difficult.

There are many things I would do differently:

  • remove classes and rely more on selectors and attributes
  • use background-image more (images are usually static, like CSS)
  • rely on a ui.js and only use index.html for the main item/page
  • use data-attributes to manipulate dynamic div's (numbering classes does not work well)
  • maybe use IndexedDB next time, but it wasn't necessary here

The general organization seems chaotic. Some variables could be made global but I had issues passing them into sub-functions and using them in there.

Is there a better/simpler way of destructuring or manipulating NodeList's?

Community feedback

Rynex Akilβ€’ 100

@rynex-zv

Posted

Hi i just tested a bit your site! super nice i should say!

the problem i found:

-when selecting X as start valeu, the hover button .game-board .game-board-grid .space:not(.clicked):hover display's icon-o-outline.svg not the icon-X-outline.svg start a game with O click once in the grid then reset to and chose X. you will see the hover is O.

-the maine page when you hover on x , o diseper . i think its better to gray it out or only lower the transperty ot hide it.

hope it was helpful!

1

Leopoldiniβ€’ 180

@LShiznit

Posted

@rynex-zv I'm not so sure about your first point. I think you are referring to the hover state staying on. I'll check the CSS, the problem is probably there.

Thank you for your second point. I like your suggestion.

0
Rynex Akilβ€’ 100

@rynex-zv

Posted

@LShiznit you're welcome!

For my first point see this screenshot there i'm the X but the hover view a O I think after playing with O and then restarting and select X you forgot to change the hover background-image but as soon as i press on a grid cell then the hover background-image is set to X i hope i was clear πŸ˜…

Marked as helpful

1
Leopoldiniβ€’ 180

@LShiznit

Posted

@rynex-zv I see it now. Fixed. The problem was that I needed to add a class '.x' at the beginning of every game by default.

Good find. Thank you

1

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