Javascript Assignment:

Problem: If you dont know how to play Tic Tac Toe, watch this short video to learn the game. Use Events and DOM manipulation to create a playable Tic Tac Toe game. Do the following using only JavaScript. Do not modify the HTML or CSS files. When you see this symbol: save and refresh the browser (this should happen automatically if you are using Brackets with Live Preview), then check to make sure it is working before you proceed. 1. Create two variables called playerX and playerO. Set them to the DOM element with the id x and o respectively. This is the text at the top that says whos turn it is.

Provided HTML file:

Tic Tac Toe

Tic Tac Toe Player X Player O

Provided Winner Js file:

/* Function to determine if there is a winner. The `player` argument is the player who's turn it is: 'x' or 'o'. The `board` argument is a NodeList of TD cells on the board. It will always contain 9 TD elements. `checkWin` returns an array of winning cells if there is a winner and null if not */

function checkWin(player, board) { // Array of all possible winning combinations const winningPositions = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6], ];

// convert `board` to an array so we can use `map`. const boardArray = Array.from(board);

// `grid` will be an array of booleans, true if `player` occupies that square. const grid = boardArray.map((square) => square.classList.contains(player));

// go through each possible winning position for (let win of winningPositions) { // if they are all true then it is a winner! if (grid[win[0]] && grid[win[1]] && grid[win[2]]) { return win; } } // there is no winner return null; }

Provided CSS file:

body { text-align: center; font-size: 16px; font-family: 'Comic Sans MS', Helvetica, sans-serif; } table { margin-left: auto; margin-right: auto; width: 551px; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none; border-collapse: collapse; } td { height: 175px; width: 175px; text-align: center; font-size: 120px; } td:nth-of-type(2) { border-left: 2px solid #cccccc; border-right: 2px solid #cccccc; } tr:nth-of-type(2) td { border-top: 2px solid #cccccc; border-bottom: 2px solid #cccccc; } #players { margin-left: auto; margin-right: auto; padding: 20px 10px 10px 10px; width: 511px; text-align: left; } #players > div { display: inline-block; padding-right: 25px; color: #cccccc; transition-duration: 200ms; } .button { float: right; } .current-player { color: black !important; transform: scale(1.5); } .x { color: rgb(40, 143, 66); } .x:before { content: 'X'; } .o { color: rgb(31, 0, 204); } .o:before { content: 'O'; }

.x.o { color: rgb(241, 79, 4); } .x.o:before { content: '?'; }