tic tac toe

index.html

<h1>Tic Tac Toe</h1>
<table>
  <tr>
    <td>
      <div id="1">/</div>
    </td>
    <td>
      <div id="2">/</div>
    </td>
    <td>
      <div id="3">/</div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="4">/</div>
    </td>
    <td>
      <div id="5">/</div>
    </td>
    <td>
      <div id="6">/</div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="7">/</div>
    </td>
    <td>
      <div id="8">/</div>
    </td>
    <td>
      <div id="9">/</div>
    </td>
  </tr>
</table>

script.js

var turn =1;
function ch(){
  if($(this).html()==='/'){
     if(turn%2===1){
    $(this).html('O');
    turn++;
  }
  else{
    $(this).html('X');
    turn++;
  }
     }
  
}
$('#1').click(ch);
$('#2').click(ch);
$('#3').click(ch);
$('#4').click(ch);
$('#5').click(ch);
$('#6').click(ch);
$('#7').click(ch);
$('#8').click(ch);
$('#9').click(ch);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

style.css

h1{
  font-size:350%;
  text-align:center;
  margin:auto auto;
}
table{
  font-size:350%;
  vertical-align: middle;
  margin:4em auto;
}
td{
  heigth: 4em;
  width: 1.5em;
  border: 1px solid black;
  text-align:center;
}

styles

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

tic tac toe.markdown

tic tac toe

A Pen by Fernando Ramirez on CodePen.

License.