chunkyguy/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="gameContainer">
        <h1>Tic Tac Toe</h1>
        <div id="cellContainer">
            <div cellIndex="0" class="cell"></div>
            <div cellIndex="1" class="cell"></div>
            <div cellIndex="2" class="cell"></div>
            <div cellIndex="3" class="cell"></div>
            <div cellIndex="4" class="cell"></div>
            <div cellIndex="5" class="cell"></div>
            <div cellIndex="6" class="cell"></div>
            <div cellIndex="7" class="cell"></div>
            <div cellIndex="8" class="cell"></div>
        </div>
        <h2 id="statusText">Loading...</h2>
        <button id="restarButton">Restart</button>
    </div>
	<script src="index.js"></script>
  </body>
</html>

## index.js
const cells = document.querySelectorAll(".cell");
const statusText = document.querySelector("#statusText");
const restarButton = document.querySelector("#restarButton");

let board = [
    "", "", "",
    "", "", "",
    "", "", ""
];
const winPositions = [
    // rows
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    // columns
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    // diagonals
    [0, 4, 8],
    [2, 4, 6]
];
let currPlayer = "X";
let isPlaying = false;

function isWin() {
    for (let idx = 0; idx < winPositions.length; idx++) {
        const winPosition = winPositions[idx];
        const vals = winPosition.map((jdx) => board[jdx]);
        const isWin = vals.every((x) => x == currPlayer);
        if (isWin) {
            return true;
        }
    }
    return false;
}

function isDraw() {
    return !board.includes("");
}

function handleCellTap() {
    if (!isPlaying) {
        return;
    }

    const cellIdx = this.getAttribute("cellIndex");
    if (board[cellIdx] == "") {
        board[cellIdx] = currPlayer;
        this.textContent = currPlayer;
        if (isWin()) {
            statusText.textContent = `${currPlayer} wins!`;
            isPlaying = false;
        }
        else if (isDraw()) {
            statusText.textContent = "It's a draw!";
            isPlaying = false;
        }
        else {
            currPlayer = (currPlayer == "X") ? "O" : "X";
            statusText.textContent = `${currPlayer}'s turn`;
        }
    }
    else {
        statusText.textContent = "Invalid move!";
    }
}

function handleRestartTap() {
    newGame();
}

function newGame() {
    for (let idx = 0; idx < board.length; idx++) {
        board[idx] = "";
    }
    cells.forEach((cell) => {
        cell.textContent = "";
    });
    statusText.textContent = `${currPlayer}'s turn`;
    isPlaying = true;
}

function initGame() {
    cells.forEach(cell => cell.addEventListener("click", handleCellTap));
    restarButton.addEventListener("click", handleRestartTap);
    newGame();
}

initGame();

## style.css
#gameContainer {
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: center;
}

#cellContainer {
    display: grid;
    grid-template-columns: repeat(3, auto);
    width: 225px;
    height: 225px;
    margin: auto;
}

.cell {
    width: 75px;
    height: 75px;
    border: 2px solid;
    box-shadow: 0 0 0 2px;
    line-height: 75px;
    font-size: 50px;
    cursor: pointer;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Tic Tac Toe</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div id="gameContainer">
	<h1>Tic Tac Toe</h1>
	<div id="cellContainer">
	<div cellIndex="0" class="cell"></div>
	<div cellIndex="1" class="cell"></div>
	<div cellIndex="2" class="cell"></div>
	<div cellIndex="3" class="cell"></div>
	<div cellIndex="4" class="cell"></div>
	<div cellIndex="5" class="cell"></div>
	<div cellIndex="6" class="cell"></div>
	<div cellIndex="7" class="cell"></div>
	<div cellIndex="8" class="cell"></div>
	</div>
	<h2 id="statusText">Loading...</h2>
	<button id="restarButton">Restart</button>
	</div>
	<script src="index.js"></script>
	</body>
	</html>
	const cells = document.querySelectorAll(".cell");
	const statusText = document.querySelector("#statusText");
	const restarButton = document.querySelector("#restarButton");

	let board = [
	"", "", "",
	"", "", "",
	"", "", ""
	];
	const winPositions = [
	// rows
	[0, 1, 2],
	[3, 4, 5],
	[6, 7, 8],
	// columns
	[0, 3, 6],
	[1, 4, 7],
	[2, 5, 8],
	// diagonals
	[0, 4, 8],
	[2, 4, 6]
	];
	let currPlayer = "X";
	let isPlaying = false;

	function isWin() {
	for (let idx = 0; idx < winPositions.length; idx++) {
	const winPosition = winPositions[idx];
	const vals = winPosition.map((jdx) => board[jdx]);
	const isWin = vals.every((x) => x == currPlayer);
	if (isWin) {
	return true;
	}
	}
	return false;
	}

	function isDraw() {
	return !board.includes("");
	}

	function handleCellTap() {
	if (!isPlaying) {
	return;
	}

	const cellIdx = this.getAttribute("cellIndex");
	if (board[cellIdx] == "") {
	board[cellIdx] = currPlayer;
	this.textContent = currPlayer;
	if (isWin()) {
	statusText.textContent = `${currPlayer} wins!`;
	isPlaying = false;
	}
	else if (isDraw()) {
	statusText.textContent = "It's a draw!";
	isPlaying = false;
	}
	else {
	currPlayer = (currPlayer == "X") ? "O" : "X";
	statusText.textContent = `${currPlayer}'s turn`;
	}
	}
	else {
	statusText.textContent = "Invalid move!";
	}
	}

	function handleRestartTap() {
	newGame();
	}

	function newGame() {
	for (let idx = 0; idx < board.length; idx++) {
	board[idx] = "";
	}
	cells.forEach((cell) => {
	cell.textContent = "";
	});
	statusText.textContent = `${currPlayer}'s turn`;
	isPlaying = true;
	}

	function initGame() {
	cells.forEach(cell => cell.addEventListener("click", handleCellTap));
	restarButton.addEventListener("click", handleRestartTap);
	newGame();
	}

	initGame();
	#gameContainer {
	font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	text-align: center;
	}

	#cellContainer {
	display: grid;
	grid-template-columns: repeat(3, auto);
	width: 225px;
	height: 225px;
	margin: auto;
	}

	.cell {
	width: 75px;
	height: 75px;
	border: 2px solid;
	box-shadow: 0 0 0 2px;
	line-height: 75px;
	font-size: 50px;
	cursor: pointer;
	}