tic-tac-toe sandbox

index.html

<!-- this is an experiment -->
<div class="container">
<div class="text-center center-block">
  <div class="row text-center center-block">
<div class="col-xs-4 grid-box  top-row left-col" id="1"></div>
<div class="col-xs-4 grid-box top-row middle-col" id="2"></div>
<div class="col-xs-4 grid-box top-row right-col" id="3"></div>
</div>
  <div class="row text-center center-block">
<div class="col-xs-4 grid-box middle-row left-col" id="4"></div>
<div class="col-xs-4 grid-box middle-row middle-col" id="5"></div>
<div class="col-xs-4 grid-box middle-row right-col" id="6"></div>
</div>
  <div class="row text-center center-block">
<div class="col-xs-4 grid-box bottom-row left-col" id="7"></div>
<div class="col-xs-4 grid-box bottom-row middle-col" id="8"></div>
<div class="col-xs-4 grid-box bottom-row right-col" id="9"></div>
</div>

</div>
  </div>

script.js

$(function() {

  for (var i = 1; i <= 9; i++) {
    var letter = i % 2 ? "X" : "O";
    var id = '#' + i;
    $(id).text(letter);
  }

});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

.grid-box {
/*   min-width: 200px;
  min-height: 200px;
  max-width: 300px;
  max-height: 300px; */
  max-height: 200px;
  width: 200px;
/*   border: 5px solid red; */
  font-size: 10em;
}

.top-row {
  border-bottom: 5px solid red;
}

.middle-row {
  border-bottom: 5px solid red;
  border-top: 5px solid red;
}

.bottom-row {
/*   border-bottom: 5px solid red; */
  border-top: 5px solid red;
}

.left-col {
  border-right: 5px solid red;
}

.middle-col {
  border-right: 5px solid red;
  border-left: 5px solid red;
}

.right-col {
/*   border-bottom: 5px solid red; */
  border-left: 5px solid red;
}

styles

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

tic-tac-toe-sandbox.markdown

tic-tac-toe sandbox

A Pen by Ken Haduch on CodePen.

License.

experimental gist - the start of the tic-tac-toe game.