Bind key to open a specific website on my website

Question

I'm creating a website for my school about a certain topic. I thought it would be fun if I put a little "secret" where I can press a button that will open a secret page or overlay...

Example of a website that uses something like this: https://krunker.io/ (press the number "5" when in main menu)

Answer 1

It is quite simple, you can add some event listener to the body like this.

body = document.querySelector("body")
body.addEventListener("keyup", (event) => {
    console.log(event)
})

Then, if you see the event variable. You'll see what key you've been pressed when you are on the page. Once you understand, you can customize the function to reach what you desire. For example, if "w" is pressed :

body.addEventListener("keyup", (event) => {
    if(event.key === "w"){
      // Do something here
    }
})

Answer 2

Hi you can bind to a your website with something like this

document.addEventListener("keydown", (event) => {
  // Move this to a separate function to manage the logic
  if (event.code === "Numpad9") {
    console.log("Numpad9 Pressed");
  }

  // Your page here
  window.open("www.youtube.com", "_blank");
});