JSFiddle - React, Tailwind, and code Playground

by Jacques Vincilione

HTML

<div>
  <select id="width">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
  </select>
  <select id="height">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
  </select>
  <button id="create">Create Game</button>
  <div id="board"></div>
</div>

CSS

.row {
  height: 30px;
}

.square {
  width: 30px;
  height: 30px;
  display: inline-block;
}

JavaScript

var Board = function(cols, rows) {
	var board = {};
	board.color1 = '#000';
  board.color2 = '#dd002b';
  board.cols = cols || 10;
  board.rows = rows || 10;

  board.setCols = function(numCols) {
    this.cols = columns;
    this.drawBoard();
  };
  board.setRows = function(numRows) {
    this.rows = numRows;
    this.drawBoard();
  };
  board.setColors = function(color1, color2) {
    this.color1 = color1;
    this.color2 = color2;
    this.drawBoard();
  };
  board.createBoard = function() {
  	var rows = $('<div></div>');
    for(var i = 0; i < this.rows; i++) {
      var row = $('<div class="row row-' + i + '"></div>');
      for(var n = 0; n < this.cols; n++) {
        var square = $('<span class="square"></span>');
        if ((n + i) % 2 === 0) {
          square.css('background-color', this.color1);
        } else {
          square.css('background-color', this.color2);
        }
        row.append(square);
      }
      rows.append(row);
    }
		return rows[0];
  };
  return board;
}
var checkerboard;
$('#create').on('click', function() {
	var boardContainer = $('#board');
  boardContainer.empty();
	var cols = $('#width').val();
  var rows = $('#height').val();
	checkerboard = new Board(cols, rows);
	var board = checkerboard.createBoard();
  boardContainer.append(board);
});