abc

zxc

by zxzc0

HTML

<div id="content">

  <div id="word">witam</div>
  <input type="text" id="InputInf" class="form" placeholder="Infinitive">
  <input type="text" id="InputSim" class="form" placeholder="Simple Past">
  <input type="text" id="InputPar" class="form" placeholder="Past Participle">

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

  <div id="test"></div>
</div>

CSS

body {
  height: 100%;
  padding: 0;
  margin: 0;
  color: black;
  font-family: 'Roboto', sans-serif;
}

.nav {
  float: left;
  margin-left: 20px;
  margin-top: 26px;
  font-weight: bold;
  cursor: pointer;
  font-size: 18px;
  text-transform: capitalize;
  color: white;
}

#content {
  margin-right: auto;
  margin-left: auto;
  padding: 10px;
  border-radius: 5px;
  width: 200px;
  background-color: #fff;
  border: 0px solid black;
  margin-top: 50px;
}

#word {
  margin: 3px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 32px;
  text-transform: capitalize;
}

#test {
  color: red;
  margin: 3px;
  font-weight: bold;
  font-family: 'Raleway', sans-serif;
  text-transform: capitalize;
}

.form {
  color: black;
  margin: 5px;
  padding: 13px;
  background: #f2f2f2;
  border: none;
  border-radius: 3px;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
}

.submit {
  width: 50%;
  margin: 5px;
  padding: 8px;
  border: none;
  border-radius: 3px;
  background: #f2f2f2;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
}

.submit:hover {
  background: #9fc1f8;
}

JavaScript

const foo = () => {
var words = [
{INF: 'awake',	SIM: 'awoke',	PAR: 'awoken',	PL: 'obudzić',	},
{INF: 'be',	SIM: 'was',	PAR: 'been',	PL: 'być',	},
{INF: 'become',	SIM: 'became',	PAR: 'become',	PL: 'stawać się'},
{INF: 'begin',	SIM: 'began',	PAR: 'begun',	PL: 'zaczynać'},
{INF: 'bite',	SIM: 'bit',	PAR: 'bitten',	PL: 'gryźć'},
{INF: 'blow',	SIM: 'blew',	PAR: 'blown',	PL: 'dmuchać'},
{INF: 'break',	SIM: 'broke',	PAR: 'broken',	PL: 'łamać'},
{INF: 'bring',	SIM: 'brought',	PAR: 'brought',	PL: 'przynosić'},
{INF: 'build',	SIM: 'built',	PAR: 'built',	PL: 'budować'},
{INF: 'burn',  SIM: 'burnt',	PAR: 'burnt',	PL: 'płonąć'},
{INF: 'buy',  SIM: 'bought',	PAR: 'bought',	PL: 'kupować'},
]

  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() * 10);
  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 = '';
      test.innerText = '';
      return;
    } else if (inputValueInf != matchingInf || inputValueSim != matchingSim ||
     ...