Build Tic Tac Toe in JavaScript, HTML and CSS

We are going to be build a Tic Tac Toe game in JavaScript! It's going to take a couple of months and this is the first part.

Building the user interface (Part 1)

In this challenge you will be setting up the game environment and the user interface You can mix JavaScript, HTML and CSS. Frameworks are allowed however bonus points if you use vanilla JavaScript, CSS and HTML.

This is the first part of this challenge and this covers the display of the game board. The functionality will be covered in next months challenge.

Level 1 - Build the game board

  • Build a 3 x 3 grid in HTML and CSS
  • Center the grid in the middle of the page
  • Add borders except for the outside border
  • Make it responsive to different screen sizes

Level 2 - Choose crosses or circles

  • Create a HTML form that allows you to choose your player symbol (Crosses or Circles)
  • Display whose turn it is above the game board
  • Create a restart button below the game board

Level 3 - Create a leader board

  • Create a leader board above the game that displays the current score and the players' symbol

Level 4 - Create modals

These can be hidden for now as we will be adding the JavaScript to the game next month.

  • Display a modal if you win
  • Display a modal if you lose
  • Display a modal if there is a draw

The next month's challenge will be to build the JavaScript functionality so make the user interface look pretty.