JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

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

<ul class="quiz-li">

	<li>
		<input type="text" id="InputInf" class="form" placeholder="Infinitive">
			<div id="answerInf" class="answer"></div>
	</li>

	<li>
		<input type="text" id="InputSim" class="form" placeholder="Simple Past">
			<div id="answerSim" class="answer"></div>
	</li>

	<li>
		<input type="text" id="InputPar" class="form" placeholder="Past Participle">
			<div id="answerPar" class="answer"></div>
	</li>
</ul>
<input type="submit" id="submit" class="submit-quiz" value="Sprawdź">

  <div id="counter" style="text-align: center;"></div>
</div>

CSS

body {
  background-color: #20262E;
  color: white;
  font-family: 'Lato', sans-serif;
}


li{
  list-style-type: none;
  display: inline-block;
}

JavaScript

const foo = () => {
let words = [
{q: 'B1: bić, pokonywać, ubijać ', w: 'beat', e: 'beat', r: 'beaten'},
{q: 'B1: (u)gryźć, kąsać', w: 'bite', e: 'bit', r: 'bitten'},
{q: 'B1: krwawić', w: 'bleed', e: 'bled', r: 'bled'},
{q: 'B1: dmuchać, wiać', w: 'blow', e: 'blew', r: 'blown'},
{q: 'B1: kopać (w ziemi), przekopywać', w: 'dig', e: 'dug', r: 'dug'},
{q: 'B1: skakać do wody, nurkować', w: 'dive', e: 'dove', r: 'dived'},
{q: 'B1: rysować, ciągnąć, dobierać, losować, remisować', w: 'draw', e: 'drew', r: 'drawn'},
{q: 'B1: karmić, żywić', w: 'feed', e: 'fed', r: 'fed'},
{q: 'B1: walczyć', w: 'fight', e: 'fought', r: 'fought'},
{q: 'B1: wybaczać', w: 'forgive', e: 'forgave', r: 'forgiven'},
{q: 'B1: mrozić, marznąć', w: 'freeze', e: 'froze', r: 'frozen'},
{q: 'B1: wisieć, zawieszać, wieszać', w: 'hang', e: 'hung', r: 'hung'},
{q: 'B1: wieszać, powiesić (się)', w: 'hang', e: 'hanged', r: 'hanged'},
{q: 'B1: chować, ukrywać, skrywać', w: 'hide', e: 'hid', r: 'hidden'},
{q: 'B1: skrzywdzić, zranić, sprawić', w: 'hurt', e: 'hurt', r: 'hurt'},
{q: 'B1: robić na drutach', w: 'knit', e: 'knit', r: 'knit'},
{q: 'B1: kłamać', w: 'lie', e: 'lied', r: 'lied'},
{q: 'B1: leżeć, kłaść się', w: 'lie', e: 'lay', r: 'lain'},
{q: 'B1: oświetlać, zapalać (się)', w: 'light', e: 'lit', r: 'lit'},
{q: 'B1: oznaczać, znaczyć, mieć na myśli', w: 'mean', e: 'meant', r: 'meant'},
{q: 'B1: kośić, strzyc, żąć', w: 'mow', e: 'mowed', r: 'mown'},
{q: 'B1: zrezygnować', w: 'quit', e: 'quit', r: 'quit'},
{q: 'B1: odbudować przebudować', w: 'rebuild', e: 'rebuilt', r: 'rebuilt'},
{q: 'B1: jeździć konno', w: 'ride', e: 'rode', r: 'ridden'},
{q: 'B1: przygotowywać, umieścić, ustawić', w: 'set', e: 'set', r: 'set'},
{q: 'B1: szyć', w: 'sew', e: 'sewed', r: 'sewed'},
{q: 'B1: świecić, błyszczeć, zabłysnąć', w: 'shine', e: 'shone', r: 'shone'},
{q: 'B1: wystrzelić, strzelać', w: 'shoot', e: 'shot', r: 'shot'},
{q: 'B1: tonąć', w: 'sink', e: 'sank', r: 'sunk'},
{q: 'B1: pachnieć, wąchać, cuchnąć', w:...