To enable full-screen mode programmatically when a user clicks a button, you’ll want to utilize the Fullscreen API, which allows you to request full-screen display for elements in a cross-browser compatible way. Start by creating a button that, when clicked, triggers a function to enter full-screen mode using element.requestFullscreen(). Be sure to check compatibility across different browsers, as method names can differ: use element.mozRequestFullScreen() for Firefox, element.webkitRequestFullscreen() for Safari, and element.msRequestFullscreen() for older Internet Explorer versions. It’s wise to include checks to confirm whether the document is already in full-screen mode, utilizing document.fullscreenElement to determine this. If full-screen functionality is denied, you might want to handle that gracefully, perhaps prompting the user with a message indicating that full-screen is unsupported.

For toggling full-screen mode, you’ll also need to handle exiting by implementing an exitFullscreen() method tied to another button or the same one, depending on your design choice. To make the user experience seamless, consider adding event listeners that will detect when the user exits full-screen mode so you can update your UI accordingly. Additionally, especially for mobile devices, be cautious as certain browsers may impose limitations or specific user gestures for entering full-screen mode. Wrapping your full-screen logic in a single function, which checks the state and toggles full-screen accordingly, will provide a neat and manageable solution. If you’d like, here’s a straightforward example:

    const fullScreenButton = document.getElementById('fullScreenBtn');

    fullScreenButton.addEventListener('click', () => {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen().catch(err => {
                console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
            });
        } else {
            document.exitFullscreen();
        }
    });