Week 1 Weekend HW - Tic Tac Toe

Objective: Build a tic tac toe game in HTML and pure JavaScript.

This week we have been learning about writing functions, working with loops, and writing conditionals. We also learned about how to use JavaScript to interact with the DOM.

Now we're going to make a Tic Tac Toe game using all of this.

Core functionality

• an HTML/CSS structure that resembles a tic tac toe grid
• two users sitting behind the same computer take turns clicking on the grid, alternating clicks display X/O in the clicked cell
• make it clear to the user when the game is over (putting a message on the page would be great, but a console.log() message will do in a pinch)

Hint: Consider storing the contents of the board in an array. Can you represent the winning combinations in another array? You could then check if any of the winning combinations are on the board after every move.

How to get started

1. Touch an index.html file. This is your starting point for the project. Add the necessary HTML tags, including script and link tags to link to your JavaScript and CSS files respectively.
2. Before you start working with JavaScript, construct the gameboard. The gameboard page should include the 3x3 grid. Using id and class on clickable elements will help you wire your board up to your JavaScript.
3. JavaScript portion will be next:
   • Locate the elements you want to use within your app. Think about using document.getElementById, document.getElementsByClassName or something similar to locate your target elements. Try this in your console to make sure your selection works.
   • After finding the elements, start writing logic to listen for click events on those elements.
   • You will also need a variable to keep track of moves. As this will be used to indicate whether or not to draw an X or an O.

Stretch tasks

• make it sexy - style it up with CSS, be creative!
• A cell should not be able to be replayed once marked.
• you can reset the game without refreshing the browser
• keep track of and display to user how many times X and O have won since the last time the browser was refreshed
• have fun! ;-)

Super stretch tasks

• build functionality that allows a user to play against the computer choosing squares at random
• then make your computer smart