JSFiddle - React, Tailwind, and code Playground

by Narayan Prusty

HTML

<div id="box" onclick="full_screen();"></div>

CSS

div
{
    height: 300px;
    width: 300px;
    background-color: green;
}

JavaScript

function full_screen()
{
    // check if user allows full screen of elements
    if("fullscreenEnabled" in document || "webkitFullscreenEnabled" in document || "mozFullscreenEnabled" in document || "msFullscreenEnabled" in document) 
    {
        console.log("User allows fullscreen");
        
        var element = document.getElementById("box");
        if("requestFullscreen" in element) 
        {
            //requestFullscreen function only works when there is a user action(click event).
            element.requestFullscreen();
        } 
        else if ("webkitRequestFullscreen" in element) 
        {
            console.log(element.webkitRequestFullscreen());
        } 
        else if ("mozRequestFullScreen" in element) 
        {
            element.mozRequestFullscreen();
        } 
        else if ("msRequestFullscreen" in element) 
        {
            element.msRequestFullscreen();
        }
    }
    else
    {
        console.log("User doesn't allow full screen");
    }
}