<div class="board-container">
  <div class="board">
  </div>
</div>
@mixin board-piece-shadow {
  text-shadow: -0.0625em 0 var(--black), 0 0.0625em var(--black), 0.0625em 0 var(--black), 0 -0.0625em var(--black);
}

.board-container {
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.25em;
}

.board {
  --black: #36454f;
  --board-foreground-color: #61b3f1;
  --board-background-color: #2678ca;
  --red-peg-color: #f00;
  --white-peg-color: #fff;
  --dimension: 35em;  
  
  font-family: Verdana;
  box-sizing: border-box;
  display: grid;
  min-width: var(--dimension);
  min-height: var(--dimension);
  grid-template-columns: repeat(11, 2.5em);
  grid-template-rows: repeat(11, 2.5em);
  border: 0.0625em solid var(--board-foreground-color);
  color: var(--board-foreground-color);
  background-color: var(--board-background-color);
  grid-gap: 0.625em;
  padding: 0.625em;

  &__square {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.0625em solid var(--board-foreground-color);

    &--playable::before {
      position: relative;
      top: -0.125rem;
      content: "○";     
      font-size: 1.5em;
    }

    &--miss::before {
      position: relative;
      top: -0.2rem;
      content: "●";
      color: var(--white-peg-color);
      filter: brightness(85%);
      font-size: 1.75em;
      @include board-piece-shadow;
    }

    &--hit::before {
      position: relative;
      top: -0.2rem;
      content: "●";
      color: var(--red-peg-color); 
      filter: brightness(75%);      
      font-size: 1.75em;
      @include board-piece-shadow;
    }

    &--top-header,
    &--side-header {
      font-weight: bolder;
    }
  }
}
function getRandomNumber(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

function getMoveCssClass(index) {
  return getRandomNumber(index) % 9 === 0
    ? "board__square--hit"
    : `board__square--${getRandomNumber(index) % 6 === 0 ? "miss" : "playable"}`;
}

function renderBoard(boardContainer) {
  const headerMarkup = new Array(11).fill("").reduce((html, current, index) => {
    return (
      html +
      `<div class="board__square ${
        index > 0 ? "board__square--top-header" : ""
      }">${index === 0 ? "" : index}</div>`
    );
  }, "");

  boardContainer.innerHTML = headerMarkup;

  const boardBuilder = letterIndex => {
    const letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];

    return (html, current, index) =>
      html +
      `<div class="board__square ${
        index % 11 === 0 ? "board__square--side-header" : getMoveCssClass(index)
      }">${
        index % 11 === 0 ? letters.slice(letterIndex++, letterIndex) : ""
      }</div>`;
  };

  const restOfBoardMarkup = new Array(110).fill("").reduce(boardBuilder(0), "");
  boardContainer.insertAdjacentHTML("beforeend", restOfBoardMarkup);
}

const board = document.querySelector(".board");

renderBoard(board);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.