Easter Egg on Personal Website

easter_egg.js

const keyboard_pic = document.querySelector('div#home-card img')
const keyCode = "ASDFU"
let keyStack = ""

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function rgbKeyboard() {
  keyboard_pic.src = "images/keyboard-lit.jpg"
  for(i = 0; i < 3600; i++) {
    keyboard_pic.style = `filter: hue-rotate(${i}deg)`;
    await sleep(10);
  }
  keyboard_pic.src = "images/keyboard.jpg"
}

document.querySelector('body').onkeydown = (e) => {
  keyStack += e.code.substring(3, 4)
  if (keyStack.length === 5 && keyStack === keyCode) {
    rgbKeyboard()
    keyStack = ""
  } else if (keyStack.length < 5 && keyStack !== keyCode.substring(0, keyStack.length)) {
    keyStack = ""
  } else if (keyStack.length > 5) {
    keyStack = ""
  };
}

home_block.html

<div class="card border-primary" id="home-card">
  <img src="images/keyboard.jpg" class="card-img-top">
...