<p><b>Using a mouse, try to click the highlighted button.</b></p>
<p>It's hard to click the right button when you can't see where you are. This simulates what it's like for keyboard users when buttons don't have a clear focus state.</p>

<div class="container" />

* {
  cursor: none;
}

.container {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.custom-button {
  font-size: 1rem;
}

.custom-button:not(.target) {
  background-color: #ffffff;
  border-color: #666666;
  color: #666666;
}
.custom-button:not(.target):active {
  background-color: #ff0000;
  color: #ffffff;
}

const container = document.querySelector('.container');

const clearContainer = () => {
  while (container.firstChild) {
    container.removeChild(container.firstChild);
  }
}

const addButton = (index, isTarget) => {
  const button = document.createElement('button');
  button.classList.add('custom-button');
  
  if (isTarget) {
    button.classList.add('target');
    button.setAttribute('onclick', 'generateButtons(' + index + ')');
  }
  
  const content = document.createTextNode(`${index}`);
  button.appendChild(content);
  
  container.appendChild(button);
}

getTargetIndex = (lastTargetIndex) => {
  var targetIndex = Math.floor(Math.random() * 20);
  if (targetIndex === lastTargetIndex) {
    return getTargetIndex(lastTargetIndex);
  }
  return targetIndex;
}

const generateButtons = (lastTargetIndex) => {
  clearContainer();
  
  const targetIndex = getTargetIndex(lastTargetIndex);
  
  for (var i = 0; i < 20; i++) {
    addButton(i, i === targetIndex);
  }
}

generateButtons();