title: JQuery checkerboard
body: <p>Here the code I came up with for the checkerboard but just need help with adding few things to the checkerboard. I know used the bind, and draggable methods but not sure on how to do that.     </p>
  
  <p>If you click on an empty cell, nothing happens.
      If you click on an occupied cell, select that cell and visually highlight it.
      If you have a cell selected, the next cell you click on will receive the piece you chose to move.
      If you move to the same cell you selected originally, the cell is deselected and nothing happens.
      There are no rules for where you can move, and any piece existing on a cell you move to is destroyed.</p>
  
  <p><a href="http://codepen.io/anon/pen/xwRPvq" rel="nofollow"><strong>Demo</strong></a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="home"&gt;
  
  
    &lt;div class="board"&gt;
      &lt;div class="row"&gt;
        &lt;div class="cell piece red"&gt;&lt;/div&gt;
        &lt;div class="cell piece red"&gt;&lt;/div&gt;
        &lt;div class="cell piece red"&gt;&lt;/div&gt;
        &lt;div class="cell piece red"&gt;&lt;/div&gt;
        &lt;div class="cell piece red"&gt;&lt;/div&gt;
        &lt;div class="cell piece red"&gt;&lt;/div&gt;
        &lt;div class="cell piece red"&gt;&lt;/div&gt;
        &lt;div class="cell piece red"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="cell piece red"&gt;&lt;/div&gt;
        &lt;div class="cell piece red"&gt;&lt;/div&gt;
        &lt;div class="cell piece red"&gt;&lt;/div&gt;
        &lt;div class="cell piece red"&gt;&lt;/div&gt;
        &lt;div class="cell piece red"&gt;&lt;/div&gt;
        &lt;div class="cell piece red"&gt;&lt;/div&gt;
        &lt;div class="cell piece red"&gt;&lt;/div&gt;
        &lt;div class="cell piece red"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
        &lt;div class="cell"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="cell piece black"&gt;&lt;/div&gt;
        &lt;div class="cell piece black"&gt;&lt;/div&gt;
        &lt;div class="cell piece black"&gt;&lt;/div&gt;
        &lt;div class="cell piece black"&gt;&lt;/div&gt;
        &lt;div class="cell piece black"&gt;&lt;/div&gt;
        &lt;div class="cell piece black"&gt;&lt;/div&gt;
        &lt;div class="cell piece black"&gt;&lt;/div&gt;
        &lt;div class="cell piece black"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="cell piece black"&gt;&lt;/div&gt;
        &lt;div class="cell piece black"&gt;&lt;/div&gt;
        &lt;div class="cell piece black"&gt;&lt;/div&gt;
        &lt;div class="cell piece black"&gt;&lt;/div&gt;
        &lt;div class="cell piece black"&gt;&lt;/div&gt;
        &lt;div class="cell piece black"&gt;&lt;/div&gt;
        &lt;div class="cell piece black"&gt;&lt;/div&gt;
        &lt;div class="cell piece black"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>.home &gt; .board {
    display: table;
    border: 1px solid black;
  }
  
  .home &gt; .board &gt; .row {
    display: table;
  }
  
  .home &gt; .board &gt; .row &gt; .cell {
    width: 80px;
    height: 80px;
    border: 1px solid black;
    display: inline-block;
  }
  
  .piece {
    background-size: 75px 75px;
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;
  }
  
  .red {
    background-image: URL('../images/red.png');
  }
  
  .black {
    background-image: URL('../images/black.png');
  }
  </code></pre>
  
  <p>
  JQuery </p>
  
  <pre><code>$(document).ready(function() {
  
  var cells = $(".cell");
  var colorCount = 0;
  
  for (var i = 0; i &lt; cells.length; i++) {
  
      var cell = $(cells[i]);
      var isDark = colorCount % 2 == 0;
      var isNextRow = (i + 1) % 8 == 0;
      colorCount += isNextRow ? 2 : 1;
      cell.css("background-color", isDark ? "navy" : "white");
  }
  });
  </code></pre>