JSFiddle - React, Tailwind, and code Playground

by Harm Zeinstra

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table class="show-card">
</table>

<table class="settings-card">
 
</table>

<button id="select-all">
  Select all
</button>
<button id="clear-all">
  Clear all
</button>

SCSS

.show-card,
.settings-card {
  border: 1px solid black;
  border-radius: 3px;
  background-color: black;
  table-layout: fixed;

  td {
    padding: 15px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
    background-color: white;
    position: relative;


    &.marked-x::before,
    &.marked-y::after {
      content: '';
      position: absolute;
      border: 3px solid red;
      border-radius: 20px;

    }


    &.marked-x {
      &::before {
        top: calc(50% - 1px);
        left: 0;
        width: 100%;
      }
    }

    &.marked-y {
      &::after {
        top: 0;
        left: calc(50% - 1px);
        height: 100%;
      }
    }
  }

  tr td:first-child.marked-x::before {
    width: calc(100% + 10px);
    left: -10px;
  }

  tr td:last-child.marked-x::before {
    width: calc(100% + 10px);
  }

  tr:first-child td.marked-y::after {
    height: calc(100% + 10px);
    top: -10px;
  }

  tr:last-child td.marked-y::after {
    height: calc(100% + 10px);
  }

}

/** DEMO ONLY **/
html,
body {
  /* stupid jsfiddle console */
  height: 110%;
}

.show-card,
.settings-card {
  margin: 50px;
}

JavaScript

(function() {

  var setup = {
    rows: 3,
    columns: 8,
    blankSpots: [
      {row: 1, column: 4},
      {row: 2, column: 7},
      {row: 2, column: 4}
    ]
  }
  
  
  var showTable = $('table.show-card');
  for (var i = 0; i < setup.rows; i++) {
    var row = $('<tr>');
    for (var j = 0; j < setup.columns; j++) {
      var column = $('<td>');
      for (var k = 0; k < setup.blankSpots.length; k++) {
      	if (setup.blankSpots[k].row === i && setup.blankSpots[k].column === j) {
        	column.text('X');
        }
      }
      column.appendTo(row);
    }
    row.appendTo(showTable);
  }
  
  var settingsTable = $('table.settings-card');
  for (var i = 0; i < setup.rows; i++) {
    var settingsRow;
  	if (i === 0) {
    	settingsRow = $('<tr>');
      $('<td>&nbsp;</td>').appendTo(settingsRow);
    }
    var row = $('<tr>');
    for (var j = 0; j < setup.columns; j++) {
      if (i === 0) {
        var settingsColumn = $('<td>');
        $('<input>', {
        	class: 'column-toggle',
          type: 'checkbox'
        }).appendTo(settingsColumn);
        settingsColumn.appendTo(settingsRow);
      }
      if (j === 0) {
        var settingsColumn = $('<td>');
        $('<input>', {
        	class: 'row-toggle',
          type: 'checkbox'
        }).appendTo(settingsColumn);
        settingsColumn.appendTo(row);
      }
      var column = $('<td>');
      for (var k = 0; k < setup.blankSpots.length; k++) {
      	if (setup.blankSpots[k].row === i && setup.blankSpots[k].column === j) {
        	column.text('X');
        }
      }
      column.appendTo(row);
    }
    if (i === 0) {
        settingsRow.appendTo(settingsTable);
    }
    row.appendTo(settingsTable);
  }
  

  var numbersInField = [];
  $('table[class*="-card"] td').each(function(i, column) {
    while (column.innerHTML === '') {
      var numberToShow = Math.floor(Math.random() * 99) + 1;
      if (numbersInField.indexOf(numberToShow) === -1) {
        numbersInField.push(numberToShow);
 ...