JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<h2 class="title">Uzupełnij właściwymi formami czasowników</h2>
				<div class="ex-body">
					<ol>
						<li>Who <input type="text" class="e2" data-answer="was"> (be) Marylin Monroe?<span class="e2-answer"></span></li>
						<li>My grandmother <input type="text" class="e2" data-answer="had"> (have) two sisters and brother.<span class="e2-answer"></span></li>
						<li>When did she <input type="text" class="e2" data-answer="die"> (die)?<span class="e2-answer"></span></li>
						<li>Mary <input type="text" class="e2" data-answer="studied"> (study) medicine at Medical University.<span class="e2-answer"></span></li>
						<li>She <input type="text" class="e2" data-answer="worked"> (work) as a secretary in 1992.<span class="e2-answer"></span></li>
						<li>Lisa and Jack <input type="text" class="e2" data-answer="went"> (go) to the cinema yesterday.<span class="e2-answer"></span></li>
						<li>Two people <input type="text" class="e2" data-answer="wanted"> (want) to jump out of the car, but they couldn't.<span class="e2-answer"></span></li>
						<li>Mike <input type="text" class="e2" data-answer="drove"> (drive) into the park last week.<span class="e2-answer"></span></li>
						<li>Kate <input type="text" class="e2" data-answer="thanked"> (thank) Andy for his help.<span class="e2-answer"></span></li>
						<li>The sky turned grey, then it <input type="text" class="e2" data-answer="began"> (begin) to rain.<span class="e2-answer"></span></li>
					</ol>
				</div>
				<input id="checkAnswer-e2" type="submit" class="submit" value="Sprawdź">
				<input id="showAnswer-e2" type="submit" class="submit" value="Pokaż odpowiedzi">
				<input id="reset-e2" type="submit" class="submit" value="Resetuj">
			</div>

CSS

input{
  border-radius: 3px;
  border: none;
  border: 1px solid gray;
  padding: 3px;
  text-align: center;
  width: 100px;
  font-size: 18px;
}
.ex-body>ol>li>input.e4{width: 250px;}

.exer-input-wrongAnswer{border: 1px solid red;}

JavaScript

var e2inputs = document.querySelectorAll('.e2')

document.getElementById('checkAnswer-e2').addEventListener('click', function () {
  e2inputs.forEach(function (input) {
      if (input.value.trim().toLowerCase() !== input.dataset.answer) {
        input.classList.add('exer-input-wrongAnswer');
      } else {
        input.classList.remove('exer-input-wrongAnswer');
      }
    })
});

document.getElementById('showAnswer-e2').addEventListener('click', function () {
  e2inputs.forEach(function (input) {
    var answerElementt = input.parentNode.querySelector('.e2-answer')
      answerElementt.textContent = '[ ' + input.dataset.answer + ' ]'
  })
})

document.getElementById('reset-e2').addEventListener('click', function () {
  e2inputs.forEach(function (input) {
    var answerElementt = input.parentNode.querySelector('.e2-answer')
      answerElementt.textContent = '';
        input.classList.remove('exer-input-wrongAnswer');
  })
})