JavaScript Tic tac toe

by ajinkyax

HTML

<div id="player-indicator"></div>
<div id="my-div"></div>

CSS

* {
  font-family: sans-serif;
}
#my-div {
		width: 302px;
    height: 302px;
    display: block;
    margin: 0 auto;
    margin-top: 100px;
    border: 1px solid #aaa;
	}
	.tictac-row {
		width: 100%;
    height: 100px;
    display: block;
    border-bottom: 1px solid #aaa;
    display: table;
	}
	.tictac-row:last-child {
		border-bottom: 0px;
	}
	.tictac-cell {
		display: table-cell;
    width: 100px;
    height: 100px;
    border-right: 1px solid #aaa;
    font-size: 70px;
    text-align: center;
    cursor: pointer;
    background-color: #fff;
	}
	.tictac-cell:last-child {
    border-right: 0px;
	}

JavaScript

"use strict";
var TicTacToe = (function() {
  
  //Variables
  var gameData,
  		container,
      playerIndicator,
      currentPlayer;
 
  //Functions
  var _setContainer,
	  	_initGameData,
  		_render,
      _attachEvents,
      _setTurn,
      _setPlayerIndicator,
      _checkColumn,
      _checkRow,
      _checkDiagonal,
      _checkAntiDiagonal,
      _checkWin,
      _setWinner,
     	_init;
      
  _setContainer = function (_containerId) {
  	container = document.querySelector(_containerId);
  }
  
  _initGameData = function () {
  	gameData = [];
  	for(var i = 0; i < 3; i++) {
    	gameData[i] = [];
    	for(var j = 0; j < 3; j++) {
      	gameData[i].push({
        	content: ""
        })
      }
    }
  }
  
  _render = function() {
  	container.innerHTML = "";

    for(var i = 0; i < 3; i++) {
    	var row = document.createElement("div");
      row.className = "tictac-row";
    	for(var j = 0; j < 3; j++) {
      	var cell = document.createElement("div");
      	cell.className = "tictac-cell";
      	cell.innerHTML = gameData[i][j].content;
        cell.setAttribute("row", i);
        cell.setAttribute("cell", j);
        row.appendChild(cell);
      }
      container.appendChild(row);
    }
  }
  
  _attachEvents = function () {
  	container.addEventListener("click", function (event) {
    	var cell = event.target;
      var row = cell.getAttribute("row");
      var cell = cell.getAttribute("cell");
      if(currentPlayer === 1) {
      	gameData[row][cell].content = "x"
      }
      else {
      	gameData[row][cell].content = "o"
      }
      _render();
      _checkWin();
      if(currentPlayer === 1)
      	_setTurn(2);
      else
        _setTurn(1)
    })
  }
  
  _setPlayerIndicator = function (_playerIndicatorId) {
  	playerIndicator = document.querySelector(_playerIndicatorId);
  }

	_setTurn = function (_playerId) {
  	currentPlayer = _playerId;
  	playerIndicator.innerHTML = "PLAYER " + currentPlayer + "'s Turn";
  }
  
  _checkColumn =...