maxmatthews/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Tic Tac Toe</title>
	</head>
	<body>
		<div id="container">
			<div class="row">
				<button onclick="buttonClicked(event)" id="b1">&nbsp;</button>
				<button onclick="buttonClicked(event)" id="b2">&nbsp;</button>
				<button onclick="buttonClicked(event)" id="b3">&nbsp;</button>
			</div>
			<div class="row">
				<button onclick="buttonClicked(event)" id="b4">&nbsp;</button>
				<button onclick="buttonClicked(event)" id="b5">&nbsp;</button>
				<button onclick="buttonClicked(event)" id="b6">&nbsp;</button>
			</div>
			<div class="row">
				<button onclick="buttonClicked(event)" id="b7">&nbsp;</button>
				<button onclick="buttonClicked(event)" id="b8">&nbsp;</button>
				<button onclick="buttonClicked(event)" id="b9">&nbsp;</button>
			</div>
		</div>
		<script src="script.js"></script>
	</body>
</html>

## script.js
let board = [
	["", "", ""],
	["", "", ""],
	["", "", ""],
];

const updateHTML = () => {
	let html = "<div id='board'>";
	let buttonNum = 1;
	for (const row of board) {
		html += `<div class="row">`;
		for (const col of row) {
			html += `<button onclick="buttonClicked(event)" id="b${buttonNum}">${
				col || "&nbsp;&nbsp;"
			}</button>`;
			buttonNum++; //buttonNum = buttonNum + 1;
		}
		html += `</div>`;
	}
	html += `</div>`;

	document.getElementById("container").innerHTML = html;
};

// SOURCE: https://stackoverflow.com/questions/4959975/generate-random-number-between-two-numbers-in-javascript
const randomNumberBetween = (min, max) => {
	// min and max included
	return Math.floor(Math.random() * (max - min + 1) + min);
};

const computerRandomTurn = () => {
	let emptyRowIndex, emptyColIndex;
	while (!emptyRowIndex) {
		let randomRow = randomNumberBetween(0, 2);
		let randomCol = randomNumberBetween(0, 2);

		if (!board[randomRow][randomCol]) {
			emptyRowIndex = randomRow;
			emptyColIndex = randomCol;
		}
	}
	board[emptyRowIndex][emptyColIndex] = "o";
};

const checkGameStatus = () => {
	if (board[0][0] === "x" && board[0][1] === "x" && board[0][2] === "x") {
		//check first row
		return "x";
	} else if (
		board[1][0] === "x" &&
		board[1][1] === "x" &&
		board[1][2] === "x"
	) {
		//check second row
		return "x";
	} else if (
		board[2][0] === "x" &&
		board[2][1] === "x" &&
		board[2][2] === "x"
	) {
		//check third row
		return "x";
	} else if (
		board[0][0] === "x" &&
		board[1][0] === "x" &&
		board[2][0] === "x"
	) {
		//check first column
		return "x";
	} else if (
		board[0][1] === "x" &&
		board[1][1] === "x" &&
		board[2][1] === "x"
	) {
		//check second column
		return "x";
	} else if (
		board[0][2] === "x" &&
		board[1][2] === "x" &&
		board[2][2] === "x"
	) {
		//check third column
		return "x";
	}
};

const buttonClicked = (event) => {
	const buttonID = event.target.id;
	if (buttonID === "b1") {
		board[0][0] = "x";
	} else if (buttonID === "b2") {
		board[0][1] = "x";
	} else if (buttonID === "b3") {
		board[0][2] = "x";
	} else if (buttonID === "b4") {
		board[1][0] = "x";
	} else if (buttonID === "b5") {
		board[1][1] = "x";
	} else if (buttonID === "b6") {
		board[1][2] = "x";
	} else if (buttonID === "b7") {
		board[2][0] = "x";
	} else if (buttonID === "b8") {
		board[2][1] = "x";
	} else if (buttonID === "b9") {
		board[2][2] = "x";
	}

	const gameWinner = checkGameStatus();
	if (gameWinner) {
		alert(`${gameWinner} has won`);
		board = [
			["", "", ""],
			["", "", ""],
			["", "", ""],
		];
	} else {
		computerRandomTurn();
	}

	updateHTML();
};

updateHTML();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Tic Tac Toe</title>
	</head>
	<body>
	<div id="container">
	<div class="row">
	<button onclick="buttonClicked(event)" id="b1"> </button>
	<button onclick="buttonClicked(event)" id="b2"> </button>
	<button onclick="buttonClicked(event)" id="b3"> </button>
	</div>
	<div class="row">
	<button onclick="buttonClicked(event)" id="b4"> </button>
	<button onclick="buttonClicked(event)" id="b5"> </button>
	<button onclick="buttonClicked(event)" id="b6"> </button>
	</div>
	<div class="row">
	<button onclick="buttonClicked(event)" id="b7"> </button>
	<button onclick="buttonClicked(event)" id="b8"> </button>
	<button onclick="buttonClicked(event)" id="b9"> </button>
	</div>
	</div>
	<script src="script.js"></script>
	</body>
	</html>
	let board = [
	["", "", ""],
	["", "", ""],
	["", "", ""],
	];

	const updateHTML = () => {
	let html = "<div id='board'>";
	let buttonNum = 1;
	for (const row of board) {
	html += `<div class="row">`;
	for (const col of row) {
	html += `<button onclick="buttonClicked(event)" id="b${buttonNum}">${
	col \|\| "  "
	}</button>`;
	buttonNum++; //buttonNum = buttonNum + 1;
	}
	html += `</div>`;
	}
	html += `</div>`;

	document.getElementById("container").innerHTML = html;
	};

	// SOURCE: https://stackoverflow.com/questions/4959975/generate-random-number-between-two-numbers-in-javascript
	const randomNumberBetween = (min, max) => {
	// min and max included
	return Math.floor(Math.random() * (max - min + 1) + min);
	};

	const computerRandomTurn = () => {
	let emptyRowIndex, emptyColIndex;
	while (!emptyRowIndex) {
	let randomRow = randomNumberBetween(0, 2);
	let randomCol = randomNumberBetween(0, 2);

	if (!board[randomRow][randomCol]) {
	emptyRowIndex = randomRow;
	emptyColIndex = randomCol;
	}
	}
	board[emptyRowIndex][emptyColIndex] = "o";
	};

	const checkGameStatus = () => {
	if (board[0][0] === "x" && board[0][1] === "x" && board[0][2] === "x") {
	//check first row
	return "x";
	} else if (
	board[1][0] === "x" &&
	board[1][1] === "x" &&
	board[1][2] === "x"
	) {
	//check second row
	return "x";
	} else if (
	board[2][0] === "x" &&
	board[2][1] === "x" &&
	board[2][2] === "x"
	) {
	//check third row
	return "x";
	} else if (
	board[0][0] === "x" &&
	board[1][0] === "x" &&
	board[2][0] === "x"
	) {
	//check first column
	return "x";
	} else if (
	board[0][1] === "x" &&
	board[1][1] === "x" &&
	board[2][1] === "x"
	) {
	//check second column
	return "x";
	} else if (
	board[0][2] === "x" &&
	board[1][2] === "x" &&
	board[2][2] === "x"
	) {
	//check third column
	return "x";
	}
	};

	const buttonClicked = (event) => {
	const buttonID = event.target.id;
	if (buttonID === "b1") {
	board[0][0] = "x";
	} else if (buttonID === "b2") {
	board[0][1] = "x";
	} else if (buttonID === "b3") {
	board[0][2] = "x";
	} else if (buttonID === "b4") {
	board[1][0] = "x";
	} else if (buttonID === "b5") {
	board[1][1] = "x";
	} else if (buttonID === "b6") {
	board[1][2] = "x";
	} else if (buttonID === "b7") {
	board[2][0] = "x";
	} else if (buttonID === "b8") {
	board[2][1] = "x";
	} else if (buttonID === "b9") {
	board[2][2] = "x";
	}

	const gameWinner = checkGameStatus();
	if (gameWinner) {
	alert(`${gameWinner} has won`);
	board = [
	["", "", ""],
	["", "", ""],
	["", "", ""],
	];
	} else {
	computerRandomTurn();
	}

	updateHTML();
	};

	updateHTML();