JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<div>foo <input type="checkbox" id="checkFoo" unchecked></div>
 <div>bar <input type="checkbox"id="checkBar" unchecked></div>
<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

//arrays
let words;
//I would like the words from foo and bar to be dynamically allocated to the "words" array after checking the box (there will be more tables, these are just examples)

let foo = [
	{q: 'A', a: 'a'},
  {q: 'B', a: 'b'},
  {q: 'C', a: 'c'},
];

let bar = [
	{q: 'D', a: 'd'},
  {q: 'E', a: 'e'},
  {q: 'F', a: 'f'},
];

//checks
//if I checked foo and bar, the words from the table foo and bar will be displayed.
const checkFoo = document.querySelector('#checkFoo');
const checkBar = document.querySelector('#checkBar');
checkFoo.checked = false;
checkBar.checked = false;

//here is an example that doesn't work, but the problem is that there will be more than just foo and bar choices

 if (checkFoo.checked = true) {
  /* words = (foo.concat(bar)); */
  words = foo;
} else if (checkBar.checked = true){
	words = (foo.concat(bar));
}


 
//rest of code

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');

function randIndex(){
	return 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();