index.html

<h1 id="tt"></h1>
Hide helper? <input type="checkbox" id="helper" onchange="changee()">

<div class="main" id="main"></div>
<div id="possible"></div>
<script>
change=0
left=0
  fn=0
  sh=0
  
  text=''
  curr=''
  kl=['BIOPU', 'BIOP', 'BOPU', 'IOPU', 'BIPU', 'BIOU', 'BOP', 'IOP', 'OPU', 'BIP', 'BPU', 'IPU', 'BIO', 'BOU', 'IOU', 'BIU', 'OP', 'BP', 'IP', 'PU', 'BO', 'IO', 'OU', 'BI', 'BU', 'IU', 'P', 'O', 'B', 'I', 'U','']
phrase="BUIOP"
oioi=''
if (left){
phrase="VREWQ"
  for (t in kl){
  i=''
  for (k in kl[t]){i+="VREWQ"["BUIOP".indexOf(kl[t][k])]}kl[t]=i.split("").sort().join("")}}
for (k in phrase){
oioi+="<div id="+phrase[k]+" class=a>"+phrase[k]+"</div>"
}
document.getElementById("main").innerHTML=oioi

  
  things=[' ', 'Function', 'Bksp', 'Shift', 'Ctrl', 'z', 'j', 'q', 'x', 'k', 'v', 'b', 'p', 'g', 'w', 'y', 'f', 'm', 'c', 'u', 'l', 'd', 'h', 'r', 's', 'n', 'i', 'o', 'a', 't', 'e', '']
  thingssh=[' ', 'Function', 'Bksp', 'Shift', 'Ctrl', 'Z', 'J', 'Q', 'X', 'K', 'V', 'B', 'P', 'G', 'W', 'Y', 'F', 'M', 'C', 'U', 'L', 'D', 'H', 'R', 'S', 'N', 'I', 'O', 'A', 'T', 'E','']
  thingsfn=[' ', '.', ',', '/', '<', '>', '?', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '-', '_', '+', '=','']
currrr=things



document.getElementById('tt').innerHTML='Type something!'

  const keysPressed = new Set();
function blargh(){
  return keyspressed.length==0
}

function changee(){
change+=1
document.getElementById('possible').innerHTML=''
if (change%2==0){
document.getElementById('possible').innerHTML=o.join("<br>")
}
}


function ya(){
o=[]
currr=[...new Set(curr)].sort().join('')

for (j=31;j>0;j--){po=0;for (u in currr){po+=kl[j].includes(currr[u])/currr.length}if(po==1){o.push(kl[j].split("").sort((a, b) => {return phrase.indexOf(a) - phrase.indexOf(b);}).join("")+" "+currrr[j])}}


if (curr==''){

for (j=31;j>0;j--){o.push(kl[j].split("").sort((a, b) => {return phrase.indexOf(a) - phrase.indexOf(b);}).join("")+" "+currrr[j])}

}
o.push("BUIOP Space")
if (change%2!=1){document.getElementById('possible').innerHTML=o.join("<br>")}
else{document.getElementById('possible').innerHTML=''}
}

ya()


document.addEventListener('keydown', (event) => {

  for (u in phrase){document.getElementById(phrase[u]).style.backgroundColor="#7f7f7f"}

  keysPressed.add(event.key);
  if (keysPressed.has(phrase[0].toLowerCase())) {event.preventDefault();curr+=(phrase[0])} if (keysPressed.has(phrase[1].toLowerCase())) {event.preventDefault();curr+=(phrase[1])} if (keysPressed.has(phrase[2].toLowerCase())) {event.preventDefault();curr+=(phrase[2])} if (keysPressed.has(phrase[3].toLowerCase())) {event.preventDefault();curr+=(phrase[3])} if (keysPressed.has(phrase[4].toLowerCase())) {event.preventDefault();curr+=(phrase[4])}
for (u in curr){document.getElementById(curr[u]).style.backgroundColor="#000000"}

ya()


});

document.addEventListener('keyup', (event) => {

for (u in phrase){document.getElementById(phrase[u]).style.backgroundColor="#7f7f7f"}

if (keysPressed.size==1){
  if (!curr){
    curr=''
  }
  console.log("saf")
  
  symb=currrr[kl.indexOf([...new Set(curr)].sort().join(''))]
  if (symb=="Bksp"){text=text.slice(0,-1)}
  else if (symb=="Shift"){sh=1}
  else if (symb=="Function"){fn=1}
  else {text+=symb}

  if (sh==1){currrr=thingssh;sh=0}
  else if (fn==1){currrr=thingsfn;fn=0}
  else{currrr=things}
  
curr=''
document.getElementById('tt').innerHTML=text

}
keysPressed.delete(event.key)
for (u in curr){document.getElementById(curr[u]).style.backgroundColor="#000000"}
ya()
});

</script>

<style>
html{font-family: Courier New; width:90%;text-align:center;align-items:center;padding-left:5vw}
  h1{text-align:center;font-size:80px;font-weight:10;min-height:100px;}
  div{text-align:center;}
  .main{display: flex;
            flex-direction: row;
            padding: 5px;width:100%;
  display: flex;
  justify-content: center;}
.a{margin: 100px; width:100px;height:100px;background-color: #7f7f7f;border-radius:20px;margin:10px;font-size: 90px;text-align:center;color:#ffffff;transition:0.15s;}
</style>