JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<div>foo <input type="checkbox" id="checkFoo"></div>
 <div>bar <input type="checkbox" id="checkBar"></div>

<br />
 <div class="bt" id="bt">generate table</div>
 <br />
 <div class="word" id="word1">1</div>
 <div class="word" id="word2"></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 {
  cursor: pointer;
}

.x {
  border: 1px solid red;
}

.v {
  border: 1px solid green;
}

JavaScript

//arrays
let words;
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');

//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));
} */

//rest of code

let currentIndex;

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

bt.addEventListener("click", function(){
	word1.innerText = foo.q;
});