JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<ol>
  <li class="exer-li">Who <input type="text" class="exer-input e2" data-answer="was"> (be) Marylin Monroe?<span class="e2-answer"></span></li>
  <li class="exer-li">My grandmother <input type="text" class="exer-input e2" data-answer="had"> (have) two sisters and brother.<span class="e2-answer"></span></li>
</ol>

<input id="checkAnswer-e2" type="submit" value="Check">
<input id="showAnswer-e2" type="submit" value="Show answers">
<input id="reset-e2" type="submit" value="Reset">

CSS

.exer-input{
  width: 100px;
  padding: 1px;
}

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

.exer-input-reset{
  border: 1px solid gray;
  padding: 2px;
}

JavaScript

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

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

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');
  })
})