TOGGLE FULL SCREEN IN HTML / JAVASCRIPT

 Hello everyone. For today’s tutorial, we are going to create a fullscreen toggle. So what is a fullscreen toggle? A fullscreen toggle basically is a button that allows you to switch between fullscreen and windowed mode. A fullscreen mode can allow the user undistracted attention to the current page. You would find this type of toggle on a gaming site where the user can easily switch the game to full-screen mode and play the game distraction-free. 

<center><button id="btn" style="border: none;padding: 10px;color: white;width: 180px;border-radius: 5px;background: #132df3;font-weight: bold;font-family: 'Montserrat', sans-serif;">Go Fullscreen</button></center> <script> let myDocument = document.documentElement; let btn = document.getElementById("btn"); btn.addEventListener("click", ()=>{ if(btn.textContent == "Go Fullscreen"){ if (myDocument.requestFullscreen) { myDocument.requestFullscreen(); } else if (myDocument.msRequestFullscreen) { myDocument.msRequestFullscreen(); } else if (myDocument.mozRequestFullScreen) { myDocument.mozRequestFullScreen(); } else if(myDocument.webkitRequestFullscreen) { myDocument.webkitRequestFullscreen(); } btn.textContent = "Exit Fullscreen"; } else{ if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.msexitFullscreen) { document.msexitFullscreen(); } else if(document.mozexitFullscreen) { document.mozexitFullscreen(); } else if(document.webkitexitFullscreen) { document.webkitexitFullscreen(); } btn.textContent = "Go Fullscreen"; } }); </script>