Tic-toe yandex interview

index.html

<div class="current__player">
  O
</div>
<br>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<br>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<br>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<br>
<div class="winner"></div>
<div class="reset">Начать заново</div>

script.js

window.onload = function() {
	function winning(cells, player) {
		if (
			(cells[0].innerHTML == player &&
				cells[1].innerHTML == player &&
				cells[2].innerHTML == player) ||
			(cells[3].innerHTML == player &&
				cells[4].innerHTML == player &&
				cells[5].innerHTML == player) ||
			(cells[6].innerHTML == player &&
				cells[7].innerHTML == player &&
				cells[8].innerHTML == player) ||
			(cells[0].innerHTML == player &&
				cells[3].innerHTML == player &&
				cells[6].innerHTML == player) ||
			(cells[1].innerHTML == player &&
				cells[4].innerHTML == player &&
				cells[7].innerHTML == player) ||
			(cells[2].innerHTML == player &&
				cells[5].innerHTML == player &&
				cells[8].innerHTML == player) ||
			(cells[0].innerHTML == player &&
				cells[4].innerHTML == player &&
				cells[8].innerHTML == player) ||
			(cells[2].innerHTML == player &&
				cells[4].innerHTML == player &&
				cells[6].innerHTML == player)
		) {
			return `Winner is ${player}`;
		} else {
			return false;
		}
	}

	var cells = document.getElementsByClassName("cell");
	var winner = "";
	var currentPlayer = 1;
	document.getElementsByClassName(
		"current__player"
	)[0].innerHTML = currentPlayer;
	var currentPlayerTitle = "O";

	Array.from(cells).map(function(cell, index) {
		cell.addEventListener("click", function(e) {
			if (e.target.innerHTML == "X" || e.target.innerHTML == "O") {
				return;
			}

			if (currentPlayer === 1) {
				e.target.innerHTML = "X";
				winner = winning(cells, "X");
				currentPlayerTitle = "O";
				currentPlayer = 2;
			} else if (currentPlayer === 2) {
				e.target.innerHTML = "O";
				winner = winning(cells, "O");
				currentPlayerTitle = "X";
				currentPlayer = 1;
			}

			if (winner != false) {
				document.getElementsByClassName("winner")[0].innerHTML = winner;

				var resetButton = document.getElementsByClassName("reset")[0];
				resetButton.style.display = "block";
				resetButton.addEventListener("click", function(e) {
					document.getElementsByClassName("reset")[0].style.display = "none";
					document.getElementsByClassName("winner")[0].innerHTML = "";
					this.cells = [];
					Array.from(cells).map(function(cell, index) {
						cell.innerHTML = "";
					});
					currentPlayer = 1;
				});
			} else {
				document.getElementsByClassName(
					"current__player"
				)[0].innerHTML = currentPlayer == 1 
					? 'Current player is ' + currentPlayer + ' and sign is "X"'
					: 'Current player is ' + currentPlayer + ' and sign is "O"'
			}
		});
	});
};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>

style.css

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
div {
  display: inline-block;
  font-size: 30px;
  color: forestgreen;
  box-sizing: border-box;
  vertical-align: middle;
  font-family: Roboto, sans-serif;
}

.current__player {
  color: black;
}

.cell {
  width: 35px;
  height: 35px;
  text-align: center;
  border: 1px solid black;
  margin-bottom: 5px;
  margin-top: 5px;
}

.winner {
  color: red;
  font-size: 35px;
}

.reset {
	display: none;
}

.reset:hover {
	cursor: pointer;
}

tic-toe-yandex-interview.markdown

Tic-toe yandex interview

That pen was created during interview.

A Pen by sutulovalexander241038 on CodePen.

License.