Javascript

            
(function () {
  var grid,
    x     = 'x',
    o     = 'o',
    turnNumber,
    whosTurn,
    hasWinner,
    $turnNumber = $('#turn-number'),
    $whosTurn = $('#whos-turn'),
    $square = $(".square"),
    $clickPosition = $('#click-position'),
    $gameOutcome  = $('#game-outcome');

  // Default values
  var newGame = function () {
    grid  = [ null, null, null,
              null, null, null,
              null, null, null
            ],
    hasWinner = false,
    $square.text(''),
    $square.removeClass('x-color'),
    $square.removeClass('o-color'),
    turnNumber = 1,
    $turnNumber.html(turnNumber),
    $whosTurn.html(whosTurn),
    $gameOutcome.html('Unknown');
  };

  //toggle X and O
  var whosTurnIsIt = function () {
    // X goes if turnNumber is ODD, else O goes
    if (turnNumber % 2) {
      whosTurn = x;
    } else {
      whosTurn = o;
    }
  };

  $square.on("click" , function () {
    var clickPosition = (this.getAttribute("data-board-position"));
    $clickPosition.text(clickPosition);

    if (grid[clickPosition] !== null || hasWinner == true) {
      return;
    } else {
      grid[clickPosition] = whosTurn;
      $(this).text(whosTurn);
      if (whosTurn == x) {
        $(this).addClass('x-color');
      } else if (whosTurn == o) {
        $(this).addClass('o-color');
      }
    }

    checkForWinner();
    whosTurnIsIt();
  });

  /* WINNING BOARDS

    0 -- 0 1 2
    1 -- 3 4 5
    2 -- 6 7 8
       / | | | \
     3   4 5 6  7
  */

  var winningRows = [
    [0,1,2],
    [3,4,5],
    [6,7,8],
    [2,4,6],
    [0,3,6],
    [1,4,7],
    [2,5,8],
    [0,4,8]
  ];

  var checkForWinner = function () {
    // If there are no squares with 'null' then its a draw
    if (grid.indexOf(null) == -1) {
      $gameOutcome.text('Draw!');
      resetGame();
    };
    //checks if rows have winning patterns
    for(i=0; i < winningRows.length; i++){
      possiblity = winningRows[i];
      if (grid[possiblity[0]] != null && grid[possiblity[0]] == grid[possiblity[1]] && grid[possiblity[1]] == grid[possiblity[2]]) {
        $gameOutcome.text(whosTurn + ' ' + 'WINS!');
        hasWinner = true;
        resetGame();
      }
    };

    turnNumber++;
    $turnNumber.html(turnNumber);
  };

  //reset game by re-initializing starts
  var resetGame = function () {
    $reset = $('#reset');
    $reset.show();
    $reset.on('click' , function () {
      initGame();
    });
  };

  //start game
  var initGame = function () {
    newGame();
    whosTurnIsIt();
  };

  initGame();
}());
            
          

HTML

            
<div id="board">
    <p class="square square-tl" data-board-position="0"></p>
    <p class="square square-tm" data-board-position="1"></p>
    <p class="square square-tr" data-board-position="2"></p>
    <p class="square square-ml" data-board-position="3"></p>
    <p class="square square-mm" data-board-position="4"></p>
    <p class="square square-mr" data-board-position="5"></p>
    <p class="square square-bl" data-board-position="6"></p>
    <p class="square square-bm" data-board-position="7"></p>
    <p class="square square-br" data-board-position="8"></p>
</div>
<div id="specs">
    <p><span class="specs-title">Turn:</span>&nbsp;<span id="whos-turn"></span></p>
    <p><span class="specs-title">Turn Number:</span>&nbsp;<span id="turn-number"></span></p>
    <p><span class="specs-title">Click Position:</span>&nbsp;<span id="click-position">None</span></p>
    <p><span class="specs-title">Outcome:</span>&nbsp;<span id="game-outcome">Unknown</span></p>
    <p id="reset">Reset</p>
</div>