Skip to content
Submitted about 2 years ago

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

Leopoldini•180
@LShiznit
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tic Tac Toe game
  • HTML
  • CSS
  • JS
3intermediate

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-zvPosted about 2 years ago

    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
    @LShiznitPosted about 2 years ago

    @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-zvPosted about 2 years ago

    @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
    @LShiznitPosted about 2 years ago

    @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

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