JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<div id="quiz">
<div id="word">Zaczynać</div>

	<input type="text" id="InputInf" class="quiz-input" placeholder="Infinitive">
	<input type="text" id="InputSim" class="quiz-input" placeholder="Simple Past">
	<input type="text" id="InputPar" class="quiz-input" placeholder="Past Participle">
  
<!--   <li><div id="inw1">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw2">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw3">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw4">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw5">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw6">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw7">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw8">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw9">-</div><input type="text"><input type="text"><input type="text"></li>
  <li><div id="inw10">-</div><input type="text"><input type="text"><input type="text"></li> -->

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

	<div class="ugh">
		<div id="answerInf" class="answer"></div>
		<div id="answerSim" class="answer"></div>
		<div id="answerPar" class="answer"></div>
	</div>

CSS

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

li{
  list-style-type: none;
}

input{
  margin: 5px 2px;
}

div{
 display: inline-block;
}

JavaScript

const foo = () => {
var A1 = [
{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ąć'},
{INF: 'do',	SIM: 'did',	PAR: 'done',	PL: 'robić'},
{INF: 'draw',	SIM: 'drew',	PAR: 'drawn',	PL: 'rysować'},
]

var A1 = [
{INF: 'break',	SIM: 'broke',	PAR: 'broken',	PL: 'łamać'},
{INF: 'bring',	SIM: 'brought',	PAR: 'brought',	PL: 'przynosić'},
]

  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() * 13);
  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 matchingPar = words.find(word => word.PL === randomWord).PAR;

    if (inputValueInf === matchingInf && inputValueSim === matchingSim &&
    inputValuePar === matchingPar) {
    	postWord();
      	InputInf.value = '';
    		InputSim.value = '';
    		InputPar.value = '';
       ...