JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<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>

<div id="test">test</div>

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: '1a', a: '1a'},
  //{q: '2a', a: '2a'},
  //{q: '3a', a: '3a'},  
  {q: '4a', a: '4a'},
  {q: '5a', a: '5a'},
  {q: '6a', a: '6a'},
  {q: '7a', a: '7a'},
  //{q: '8a', a: '8a'},
  //{q: '9a', a: '9a'},
  {q: '10a', a: '10a'},
  
  {q: '1b', a: '1b'},
  //{q: '2b', a: '2b'},
  {q: '3b', a: '3b'},  
  //{q: '4b', a: '4b'},
  {q: '5b', a: '5b'},
  {q: '6b', a: '6b'},
  {q: '7b', a: '7b'},
  {q: '8b', a: '8b'},
  {q: '9b', a: '9b'},
  {q: '10b', a: '10b'},
];

let currentIndex;

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

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

var num = 10;

function randIndex(){
	return Math.floor(Math.random() * 10);
}

function randWord(){
  word2.style.visibility="hidden";
  
  if (words.length <= 0) {
    word1.innerText = 'end of words';
    word2.innerText = '';
    return;
  }
  
  /* if (words.length == 9) {
    num++;
    return;
  } */
  
	currentIndex = randIndex();
  word1.innerText = words[currentIndex].q;
  word2.innerText = words[currentIndex].a;
  test.innerText = randIndex();
}

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

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

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

randWord();