import './style.css'

const code = '1234';

const display = document.getElementById('display') as HTMLDivElement;
const light = document.getElementById('light') as HTMLDivElement;
const keypad = document.getElementById('keypad') as HTMLDivElement;

function resetCode() {
  display.innerText = '';
  light.classList.remove('is-success', 'is-error');
}

function composeDigit(digit: number) {
  const output = display.innerText + digit.toString();
  display.innerText = output;
  if (!code.startsWith(output)) {
    light.classList.add('is-error');
    setTimeout(resetCode, 1000)
    return;
  }
  if (code === output) {
    light.classList.add('is-success');
    return;
  }
}

for (let i = 1; i < 11; i++) {
  const digit = i % 10;
  const button = document.createElement('button');
  button.innerText = digit.toString();
  button.onclick = () => composeDigit(digit);
  keypad.appendChild(button);
}