JavaScript Tic-Tac-Toe

index.html

<header class="text-center">
  <h1>JavaScript Tic-Tac-Toe</h1>
  <h2 class="message">Click a square to mark your spot!</h2>
  <button id="reset" class="btn btn-primary">Reset</button>
</header>
<div>
  <ul id="grid"></ul>
</div>

javascript-tic-tac-toe.markdown

JavaScript Tic-Tac-Toe

Build a simple JavaScript tic-tac-toe game. Each click switches turns between 'X' and 'O'.

A Pen by cannandev on CodePen.

License.

script.js

var grid = document.getElementById('grid');
var msg = document.querySelector('.message');
var mark = 'X';
var cells;

// build grid
for (var i=1; i<=9; i++){
  var cell = document.createElement('li');
  cell.id = 'c' + i;
  cell.addEventListener('click', setMove, false);
  grid.appendChild(cell);
}

cells = document.querySelectorAll('li');

// add click listener to each cell
function setMove(){
  if(this.textContent == ''){
    this.textContent = mark;
    checkRow();    
    switchMark();
  }
}

// switch user
function switchMark(){
  if (mark == 'X'){
    mark = 'O';
  }
  else {
    mark = 'X';
  }
}

// determine a winner
function winner(a,b,c){ 
  if (a.textContent == mark && b.textContent == mark && c.textContent == mark){
    msg.textContent = mark + ' is the winner!';
    a.classList.add('winner');
    b.classList.add('winner');
    c.classList.add('winner');
    return true;
  }
  else {
    return false;
  }
}

function checkSiblings(currentMove){
  var next = Number(currentMove.id + 3);
  var prev = Number(currentMove.id - 3);
  winner(cells[currentMove.id].textContent, cells[next].textContent, cells[prev].textContent);
}

// check cell combinations 
function checkRow(){
  winner(document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c3'));
  winner(document.getElementById('c4'), document.getElementById('c5'), document.getElementById('c6'));
  winner(document.getElementById('c7'), document.getElementById('c8'), document.getElementById('c9'));  
  winner(document.getElementById('c1'), document.getElementById('c4'), document.getElementById('c7'));
  winner(document.getElementById('c2'), document.getElementById('c5'), document.getElementById('c8'));
  winner(document.getElementById('c3'), document.getElementById('c6'), document.getElementById('c9'));  
  winner(document.getElementById('c1'), document.getElementById('c5'), document.getElementById('c9'));
  winner(document.getElementById('c3'), document.getElementById('c5'), document.getElementById('c7'));
}

// clear the grid
function reset(){
  mark = 'X';
  for (var i=0; i<cells.length; i++){
    cells[i].textContent = '';
    cells[i].classList.remove('winner');
  }
  msg.textContent = 'Click a square to mark your spot!';
}

var resetButton = document.getElementById('reset');
resetButton.addEventListener('click', function(e){
  e.preventDefault();
  reset();
});

style.css

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  background-color: #299B89;
}

#grid {
  width: 300px;
  margin: 2em auto;
}

li {
  border: 1px solid #000;
  width: 100px;
  height: 100px;
  display: block;
  float: left;
  font-size: 3em;
  text-align: center;
  padding: .5em;
}

#c1, #c2, #c3 {
  border-top: none;
}

#c3, #c6, #c9 {
  border-right: none;
}

#c7, #c8, #c9 {
  border-bottom: none;
}

#c1, #c4, #c7 {
  border-left: none;
}

.btn-primary, 
.btn-primary:focus {
  outline: 0;
  background-color: #ECBD18;
  transition: all ease .3s;
}

.btn-primary:hover {
  background-color: #FFC700;
}

.wrapper {
  width: 400px;
  margin: 0 auto;
}

.winner {
  color: #9A109B;
}

.message {
  color: #fff;
  font-size: 1.5em;
  padding-bottom: 1em;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />