const keyboard = document.getElementById('keyboard');
const output = document.getElementById('output');

const fonts = ['CipherFontA', 'CipherFontB', 'SECRETCODE', 'Strange Runes', 'Theraprism'];
let currentFont = fonts[0];

for (const font of fonts) {
  const tab = document.createElement('button');
  tab.className = 'tab';
  tab.textContent = font;
  tab.addEventListener('click', () => {
    currentFont = font;
    keyboard.style.fontFamily = font;
  });
  keyboard.appendChild(tab);
}

for (const letter of 'abcdefghijklmnopqrstuvwxyz') {
  const key = document.createElement('div');
  key.className = 'key';
  key.textContent = letter;
  key.addEventListener('click', () => {
    output.textContent += letter;
    output.style.fontFamily = currentFont;
  });
  keyboard.appendChild(key);
}

const clearOutputButton = document.getElementById('clear-output');

clearOutputButton.addEventListener('click', () => {
  document.getElementById('output').textContent = '';
});