JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<p>Do you know this word?</p>

 <div class="word" id="word1"></div>
 <div class="word" id="word2">-</div>
 <div class="bt" id="btx">no</div>
 <div class="bt" id="bt">show</div>
 <div class="bt" id="btv">yes</div>

 <p style="font-size: 12px;">If you click "no" word will stay in the array, if you click "yes" word will be delete from array.</p>

CSS

* {
  box-sizing: border-box;
  -moz-user-select: none;
  user-select: none;
}

body {
  background-color: #20262e;
  color: white;
  font-size: 20px;
}

.word {
  padding: 10px;
}

.bt {
  width: 80px;
  height: 50px;
  border: 1px solid white;
  display: inline-block;
  color: white;
  font-size: 20px;
  padding-top: 12px;
  text-align: center;
  cursor: pointer;
}

.x {
  border: 1px solid red;
}

.v {
  border: 1px solid green;
}

JavaScript

let words = [{
    q: 'A',
    a: 'a'
  },
  {
    q: 'B',
    a: 'b'
  },
  {
    q: 'C',
    a: 'c'
  },
  {
    q: 'D',
    a: 'd'
  },
  {
    q: 'E',
    a: 'e'
  },
  {
    q: 'F',
    a: 'f'
  },
];

let currentIndex;

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

const btno = document.querySelector('#btx');
const btshow = document.querySelector('#bt');
const btyes = document.querySelector('#btv');

const randIndex = () => Math.floor(Math.random() * words.length); 

function randWord() {
  word2.style.visibility = "hidden";

  if (words.length <= 0) {
    word1.innerText = 'end of words';
    word2.innerText = '';
    return;
  }

  currentIndex = randIndex();
  word1.innerText = words[currentIndex].q;
  word2.innerText = words[currentIndex].a;
}

btshow.addEventListener("click", function() {
  word2.style.visibility = "visible";
});

btno.addEventListener("click", function() {
  randWord();
});

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

randWord();