JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<input onkeydown="enter1();" type="text" id="pass1" placeholder="normal pw" size="8">
<input onkeydown="enter2();" type="text" id="pass2" placeholder="master pw"  size="8">


<script>
var pass = ["pass1", "pass2", "pass3", "pass4", "pass5"];
var master = ["pass1", "pass2", "pass3", "pass4", "pass5"];
function enter1() {
    if(event.key === 'Enter') {
      var inputValue = document.getElementById("pass1").value.toLowerCase();
      for(var i = 0; i < pass.length; i++) {
          if(pass[i] === inputValue) {
              alert("Passwort richtig, gebe nun ein Masterpasswort ein");
        			document.getElementById("pass2").style.display="block";
              document.getElementById("pass1").style.background="green";
          }
      }
 	 }
}
function enter2() {
    if(event.key === 'Enter') {
      var inputValue = document.getElementById("pass2").value.toLowerCase();
      for(var i = 0; i < master.length; i++) {
          if(master[i] === inputValue) {
              alert("Du hast das Masterpasswort richtig eingegeben");
              document.getElementById("pass2").style.background="green";
          }
      }
  }
}
</script>

CSS

#alles{
  position:relative;
  top:100px;
  left:0px;
  height:500px;
  width:500px;
}
#pass1{
  position:absolute;
  top:10px;
  left:0px;
  height:40px;
  font-size:35px;
  background:red;
}
#pass2{
  position:absolute;
  top:10px;
  left:250px;
  height:40px;
  font-size:35px;
  background:red;
  display:none;
}
#ausgabe{
  position:absolute;
  top:50px;
  left:10px;
  width:400px;
  height:200px;
  font-size:40px;
}