JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<ol>
			<li>Jane is <input type="text" class="input1" id="a1"> (pretty) girl in our class.<span id="odpa1"></span></li>
			<li>Frank is much <input type="text" class="input1" id="a2"> (tall) than John.<span id="odpa2"></span></li>
			<li>It is <input type="text" class="input1" id="a3"> (high) mountain in the world.<span id="odpa3"></span></li>
			<li>You should be <input type="text" class="input1" id="a4"> (careful) next time.<span id="odpa4"></span></li>
			<li>Tom swims <input type="text" class="input1" id="a5"> (fast) of all.<span id="odpa5"></span></li>
			<li>I feel much <input type="text" class="input1" id="a6"> (good) than yesterday.<span id="odpa6"></span></li>
			<li>I'm afraid that tomorrow it can be even <input type="text" class="input1" id="a7"> (bad).<span id="odpa7"></span></li>
			<li>It is <input type="text" class="input1" id="a8" style="width: 170px;"> (beautiful) song I have ever heard.<span class="odpowiedz" id="odpa8"></span></li>
			<li class="exerli">I will see you <input type="text" class="input1" id="a9"> (late).<span id="odpa9"></span></li>
			<li class="exerli">The movie is great! I believe it in <input type="text" class="input1" id="a10" style="width: 170px;"> (interesting) movie I have ever seen.<span id="odpa10"></span></li>
		</ol>


	<input id="checkAnswer" type="submit" class="submit1" value="check">
	<input id="showAnswer" type="submit" class="submit1" value="show answers">

CSS

body{
  background-color: #20262e;
  color: white;
}
.input1{
  color: black;
  margin: 1px;
  width: 100px;
  text-align: center;
}

.input1-wrongAnswer{
  border: 1px solid #fc6f6f;
  margin: 2px;
  width: 100px;
}

.answer{
  color: red;
}

JavaScript

document.getElementById("checkAnswer").addEventListener("click", function(){
  var a1 = document.getElementById("a1").value;
  var a2 = document.getElementById("a2").value;
  var a3 = document.getElementById("a3").value;
  var a4 = document.getElementById("a4").value;
  var a5 = document.getElementById("a5").value;
  var a6 = document.getElementById("a6").value;
  var a7 = document.getElementById("a7").value;
  var a8 = document.getElementById("a8").value;
  var a9 = document.getElementById("a9").value;
  var a10 = document.getElementById("a10").value;

  if (a1 != "the prettiest"){
    document.getElementById("a1").className = "input1-wrongAnswer";
  } else{
    document.getElementById("a1").className = "input1";
      document.getElementById("odpa1").style.display = "none";
  }
  if (a2 != "taller"){
    document.getElementById("a2").className = "input1-wrongAnswer";
  } else{
    document.getElementById("a2").className = "input1";
      document.getElementById("odpa2").style.display = "none";
  }
  if (a3 != "the highest"){
    document.getElementById("a3").className = "input1-wrongAnswer";
  } else{
    document.getElementById("a3").className = "input1";
      document.getElementById("odpa3").style.display = "none";
  }
  if (a4 != "more careful"){
    document.getElementById("a4").className = "input1-wrongAnswer";
  } else{
    document.getElementById("a4").className = "input1";
      document.getElementById("odpa4").style.display = "none";
  }
  if (a5 != "fastest"){
    document.getElementById("a5").className = "input1-wrongAnswer";
  } else{
    document.getElementById("a5").className = "input1";
      document.getElementById("odpa5").style.display = "none";
  }
  if (a6 != "better"){
    document.getElementById("a6").className = "input1-wrongAnswer";
  } else{
    document.getElementById("a6").className = "input1";
      document.getElementById("odpa6").style.display = "none";
  }
  if (a7 != "worse"){
    document.getElementById("a7").className =...