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="enter1();" type="text" id="pass2" placeholder="master pw"  size="8">

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

JavaScript

var pass = ["pass1", "pass2", "pass3", "pass4", "pass5", "pass6"];
var master = ["pass1", "pass2", "pass3", "pass4", "pass5"];

var pass2 = document.getElementById("pass2");
var pass1 = document.getElementById("pass1");

function enter1() {
    if(event.key === 'Enter') {
    	var inputValue2 = pass2.value.toLowerCase();
      var inputValue1 = pass1.value.toLowerCase();
      
      for(var i=j=k= 0; j < pass.length && k < master.length; i++, j++, k++) {
      	if(master[k] === inputValue2) {
        	alert("Du hast alle Passwörter richtig eingegeben!"); 
      		pass2.style.background="green";
      	}
        
      	if(pass[j] === inputValue1 && pass2.style.display !== "block") {        	
          alert("Passwort richtig, gebe nun ein Masterpasswort ein");
         	pass2.style.display="block";
      		pass1.style.background="green";          
        }
      }
 	 }
}