JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

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

<input type="text" id="InputInf" placeholder="Infinitive">
<input type="text" id="InputSim" placeholder="Simple Past">
<input type="text" id="InputPar" placeholder="Past Participle">

<input type="submit" id="submit" value="Check">

<div id="answerInf"></div>
<div id="answerSim"></div>
<div id="answerPar"></div>

JavaScript

const foo = () => {

var words = [
{INF: 'be', 	SIM: 'was',	PAR: 'been',	PL: 'być',	},
{INF: 'begin',	SIM: 'began',	PAR: 'begun',	PL: 'zaczynać'},
/*{INF: 'break',	SIM: 'broke',	PAR: 'broken',	PL: 'łamać'},
{INF: 'bring',	SIM: 'brought',	PAR: 'brought',	PL: 'przynosić'},
{INF: 'buy',  SIM: 'bought',	PAR: 'bought',	PL: 'kupować'},
{INF: 'build',	SIM: 'built',	PAR: 'built',	PL: 'budować'},
{INF: 'choose',	SIM: 'chose',	PAR: 'chosen',	PL: 'wybierać'},
{INF: 'come',	SIM: 'came',	PAR: 'come',	PL: 'przyjść'},
{INF: 'cost',	SIM: 'cost',	PAR: 'cost',	PL: 'kosztować'},
{INF: 'cut',	SIM: 'cut',	PAR: 'cut',	PL: 'ciąć'},*/
]


  const word = document.getElementById('word');
  const test = document.getElementById('test');
  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 = InputInf.value;
    const inputValueSim = InputSim.value;
    const inputValuePar = InputPar.value;
    const matchingInf = words.find(word => word.PL === randomWord).INF;
    const matchingSim = words.find(word => word.PL === randomWord).SIM;
    const matchingPar = words.find(word => word.PL === randomWord).PAR;

    if (inputValueInf === matchingInf && inputValueSim === matchingSim &&
      inputValuePar === matchingPar) {
      postWord();
      InputInf.value = '';
      InputSim.value = '';
      InputPar.value = '';
      answerInf.innerText = '';
      answerSim.innerText = '';
      answerPar.innerText = '';
      return;
    }

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