Photo by

Nicolas Gonzalez

To make your browser fullscreen is fairly easy in JavaScript. 🚀

Let's look at it now.

To activate fullscreen you need to use the requestFullscreen() method available in the document.documentElement object.

document.documentElement.requestFullscreen(); // fullscreen API

But First, we need to check if the screen is already fullscreen and also make a function to toggle fullscreen.

We can check it through the document.fullscreen property, it will return boolean true if the screen is fullscreen and false if not.

// fullscreen function
function makeFullScreen() {
  if (!document.fullscreen) {
    // if the screen is not full
    // then request for fullscreen
    document.documentElement.requestFullscreen(); // fullscreen API
  }
}

Another problem with this is you can't just toggle the fullscreen programmatically, it needs a user interaction otherwise it will throw an error if we try to make it fullscreen automatically without user interaction.

So let's add a spacebar keypress event listener to our document i.e to the browser window so that when we press on spacebar it will make the browser into fullscreen mode.

// fullscreen function
function makeFullScreen() {
  if (!document.fullscreen) {
    // if the screen is not full
    // then request for fullscreen
    document.documentElement.requestFullscreen(); // fullscreen API
  }
}

// add event listener to document
document.addEventListener("keypress", (e) => {
  // key code for spacebar : 32
  if (e.keyCode === 32) {
    makeFullScreen();
  }
});

The keyCode for spacebar is 32.

Now if we pressed spacebar it will go into fullscreen mode.

Yay !!! 🎊

Now if you try to press the spacebar again to get out from fullscreen mode it won't work because we haven't added the functionality yet. 🚨

So let's add an else block to the if statement block.

To quit fullscreen mode we can use the exitFullscreen() method available in the document object.

Let's add it now.

// fullscreen function
function makeFullScreen() {
  if (!document.fullscreen) {
    // if the screen is not full
    // then request for fullscreen
    document.documentElement.requestFullscreen(); // fullscreen API
  } else {
    // if screen in fullscreen mode
    // quit fullscreen
    document.exitFullscreen();
  }
}

// add event listener to document
document.addEventListener("keypress", (e) => {
  if (e.keyCode === 32) {
    makeFullScreen();
  }
});

You just added a fullscreen functionality to the webpage.

You are a ninja 🥋.

Feel free to share if you found this useful 😃.

---