JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<div id="word">-----</div>

<ul>
	<li>
		<input type="text" id="InputInf"placeholder="Infinitive">
			<div id="answerInf" class="answer"></div>
	</li>
			<div style="clear:both"></div>
	<li>
		<input type="text" id="InputSim"placeholder="Simple Past">
			<div id="answerSim" class="answer"></div>
	</li>
			<div style="clear:both"></div>
	<li>
		<input type="text" id="InputPar" placeholder="Past Participle">
			<div id="answerPar" class="answer"></div>
	</li>
</ul>
<input type="submit" id="submit" value="Check">

JavaScript

const foo = () => {
var words = [
{INF: 'be', 	SIM: 'was',	PAR: 'been',	PL: 'być',	},
{INF: 'dream',	SIM: 'dreamt',  SIMM:'dreamed',	PAR: 'dreamt', PARR:'dreamed',	PL: 'śnić'},

]

  const word = document.getElementById('word');
  const InputInf = document.getElementById('InputInf');
  const InputSim = document.getElementById('InputSim');
  const InputPar = document.getElementById('InputPar');
	const submit = document.getElementById('submit');

  let randomWord = null;

  const num = () => Math.floor(Math.random() * 2);
  const postWord = () => { randomWord = word.innerText = words[num()].PL; }

  postWord();

  submit.addEventListener('click', () => {
    const inputValueInf = document.getElementById('InputInf').value;
    const inputValueSim = document.getElementById('InputSim').value;
    const inputValuePar = document.getElementById('InputPar').value;
    const matchingInf = words.find(word => word.PL === randomWord).INF;
    const matchingSim = words.find(word => word.PL === randomWord).SIM;
    const matchingSimm = words.find(word => word.PL === randomWord).SIMM;
    const matchingPar = words.find(word => word.PL === randomWord).PAR;
    const matchingParr = words.find(word => word.PL === randomWord).PARR;

    if (inputValueInf === matchingInf && inputValueSim === matchingSim || matchingSimm &&
    inputValuePar === matchingPar) {
    	postWord();
      	InputInf.value = '';
    		InputSim.value = '';
    		InputPar.value = '';
        answerInf.innerText = '';
        answerSim.innerText = '';
        answerPar.innerText = '';
        circleInf.removeAttribute("style");
        circleSim.removeAttribute("style");
        circlePar.removeAttribute("style");
      return;
}

  if(inputValueInf !== matchingInf){
      answerInf.textContent = "[ "+matchingInf+" ]";
        document.getElementById("answerInf").className = "answer";
    }   else{
          document.getElementById("answerInf").className = "display-none";
    }

  if(inputValueSim !==...