Keypad Login

for BadUIBattles lmao

by bit125

HTML

<body>
  <h2>Log in</h2>
  Username: <div id='usernamebox' style='border:1px solid white'><br></div><br><br>
  Password: <div id='passwordbox' style='border:1px solid white'><br></div>
  <br><br><br><br><br>
  <button type='button' onclick='ButtonPress("1")'>1</button>
  <button type='button' onclick='ButtonPress("2ABCabc")'>2</button>
  <button type='button' onclick='ButtonPress("3DEFdef")'>3</button>
  <br>
  <button type='button' onclick='ButtonPress("4GHIghi")'>4</button>
  <button type='button' onclick='ButtonPress("5JKLjkl")'>5</button>
  <button type='button' onclick='ButtonPress("6MNOmno")'>6</button>
  <br>
  <button type='button' onclick='ButtonPress("7PQRSpqrs")'>7</button>
  <button type='button' onclick='ButtonPress("8TUVtuv")'>8</button>
  <button type='button' onclick='ButtonPress("9WXYZwxyz")'>9</button>
  <br>
  &nbsp&nbsp&nbsp<button type='button' onclick='NewCharacter()'>OK</button>
  <button type='button' onclick='ButtonPress("0!@#$%^&*-_=+,.<>/?|")'>0</button>
  <button id='buttonDone' type='button' onclick='DoneButton()'>Done</button>
  <br>
</body>

CSS

body {
  background-color: black;
  color: white;
  font-family: helvetica;
  text-align: center;
}

div {
  font-family: courier;
  text-align: left;
}

JavaScript

let currentBox = 'usernamebox'
let currentBoxText = ''
let i = 0
let j = null

function ButtonPress(buttonValues) {
	if(j != buttonValues) {i=0}
  j = buttonValues
	document.getElementById(currentBox).innerHTML = currentBoxText + buttonValues[i]
  i = (i+1)%buttonValues.length
}
function NewCharacter() {
	currentBoxText = document.getElementById(currentBox).innerHTML
  i = 0
}
function DoneButton() {
	if(currentBox == 'usernamebox') {
  	currentBox = 'passwordbox'
    currentBoxText = ''
    i = 0
  } else if(currentBox == 'passwordbox') {
  	document.body.innerHTML = '<h1>Logged in successfully!</h1>'
  }
}