JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<div id="word1">
  -
</div>
<div id="bt">
  Add to database
</div>

CSS

body {
  background-color: #1F2227;
  color: #fff;
}

#bt {
  padding: 10px;
  cursor: pointer;
  -moz-user-select: none;
  user-select: none;
}

JavaScript

let words = ['a', 'b', 'c', 'd', 'e', 'f'];

const word1 = document.querySelector('#word1');
const bt = document.querySelector('#bt');

let currentIndex, randIndex;

function randWord() {
  if (words.length > 0) {

    if (randIndex === currentIndex) {
      randIndex = Math.floor(Math.random() * words.length);
    }
    currentIndex = randIndex;
    word1.innerText = words[currentIndex];
  } else {
    word1.innerText = "";
  }
}

bt.addEventListener("click", function() {
  words.splice(currentIndex, 1);
  randWord();
});
randWord();