JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<div class="a">A1 <input type="checkbox" class="cb" id="checkA1"></div>
  <div class="a">A2 <input type="checkbox" class="cb" id="checkA2"></div>
  <div class="a">B1 <input type="checkbox" class="cb" id="checkB1"></div>
  <div class="a">B2 <input type="checkbox" class="cb" id="checkB2"></div>
  <div class="a">C1 <input type="checkbox" class="cb" id="checkC1"></div>
  <div class="a">C2 <input type="checkbox" class="cb" id="checkC2"></div>
  
  
  <li>
  <div id="id1">0</div>
  <input type="text" id="inf1">
  <input type="text" id="sim1">
  <input type="text" id="par1">
  </li>
  <li>
  <div id="id2">0</div>
  <input type="text" id="inf2">
  <input type="text" id="sim2">
  <input type="text" id="par2">
  </li>
  
  <div class="bt" id="submit">Submit</div>
  <div id="test">y</div><br /><br /><br />


Checkbox: <input type="checkbox" id="myCheck"  onclick="myFunction()">

<p id="text" style="display:none">Checkbox is CHECKED!</p>

CSS

body {
  background-color: #20262e;
  color: white;
}

li {
  list-style-type: none;
}

input {
  margin: 5px 2px;
}

div {
  display: inline-block;
}

.a {
  display: inline-block;
  padding: 20px 6px 25px;
  cursor: pointer;
}

.cb {
  display: block;
  cursor: pointer;
}

JavaScript

let words;
var A1 = [
{w: 'be', 	e: 'was',	r: 'been',	q: 'być',	},
{w: 'begin',	e: 'began',	r: 'begun',	q: 'zaczynać'},
]

let A2 = [
{w: 'break',	e: 'broke',	r: 'broken',	q: 'łamać'},
{w: 'bring',	e: 'brought',	r: 'brought',	q: 'przynosić'},
]

let B1 = [
{w: 'buy',  e: 'bought',	r: 'bought',	q: 'kupować'},
{w: 'build',	e: 'built',	r: 'built',	q: 'budować'},
];
 
var checkBox = document.getElementById("myCheck"); 
if (checkBox.checked == true) {
  words = A1;
} else if (document.title === 'A1plus') {
  words = A2;
} else if (document.title === 'A2') {
  words = B1;
} 

/* function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}

//const myCheck = document.getElementById('myCheck');
const text = document.getElementById('text');

myCheck.addEventListener('click', () => {
var checkBox = document.getElementById("myCheck"); */

  
/*   if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  } 
});*/

const foo = () => {
  const word1 = document.getElementById('id1');
  const word2 = document.getElementById('id2');
  
  const inf1 = document.getElementById('inf1');
  const inf2 = document.getElementById('inf2');
  
  const sim1 = document.getElementById('sim1');
  const sim2 = document.getElementById('sim2');
  
  const par1 = document.getElementById('par1');
  const par2 = document.getElementById('par2');
  
  const submit = document.getElementById('submit');
  const test = document.getElementById('test');
  
  let randomWord1 = null;
  let randomWord2 = null;

  const num = () => Math.floor(Math.random() * words.length);
  const postWord1 = () =>  randomWord1 = word1.innerText = words[num()].q;
  const postWord2 = () =>  randomWord2 = word2.innerText = words[num()].q;
  postWord1();
  postWord2();

 ...