Expand|Select|Wrap|Line Numbers
- <div class="home">
- <div class="board">
- <div class="row">
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- </div>
- <div class="row">
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- </div>
- <div class="row">
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- </div>
- <div class="row">
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- </div>
- <div class="row">
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- </div>
- <div class="row">
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- </div>
- <div class="row">
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- </div>
- <div class="row">
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- </div>
- </div>
- </div>
- </body>
- </html>
Expand|Select|Wrap|Line Numbers
- .home > .board
- {
- display: table;
- border: 1px solid black;
- }
- .home > .board > .row
- {
- display: table;
- }
- .home > .board > .row > .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');
- }
Expand|Select|Wrap|Line Numbers
- $(document).ready(function()
- {
- var cells = $(".cell");
- var colorCount = 0;
- for (var i = 0; i < 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");
- }
- $(".cell.piece.red").on({
- click: function () {
- $(this).css("background-color", "yellow"); }
- });
- $(".cell.piece.black").on({
- click: function () {
- $(this).css("background-color", "yellow"); }
- });
- });