Tic-Tac-Toe Challenge

Ready for a real JavaScript challenge?

Look at the HTML, CSS and JavaScript code below. It creates the user interface and user interaction for a game of Tic-Tac-Toe. However the code is incomplete.

Your job is to complete this code by completing these two challenges:

Challenge 1:

Update this code to display a message when one of the players has won or when the game ends on a draw.

Challenge 2:

Update this code for player 1 to play against the computer! To do so you can either get the computer to place its token on the grid randomly, but you may also get the computer to make a decision by comparing different positions to place its token.

Learning Objectives

By completing this challenge you will further develop your HTML, CSS and JavaScript skills and learn how to manipulate two-dimensional arrays in JavaScript using for loops and if statements.

See the Pen TicTacToe by 101 Computing (@101Computing) on CodePen.

Click on the “Edit On CodePen” icon above to edit/complete this code. To be able to save your work on CodePen you will need to register first.