JSFiddle - React, Tailwind, and code Playground

by ecmanaut

HTML

<div class="test">Toggle Full screen</div>

CSS

.test {
  color: #fff;
  background: #aaa;
  position: absolute;
  top: 100px;
  width: 50%;
  margin-left: 25%;
  padding: 20px 0;
  text-align: center;
}

JavaScript

var test = document.querySelector('.test');
var full = null;

test.addEventListener('click', function () {
  if (test.requestFullScreen) {
    document.addEventListener('fullscreenchange', ready);
    test.requestFullScreen();
  } else if (test.mozRequestFullScreen) {
    document.addEventListener('mozfullscreenchange', ready);
    test.mozRequestFullScreen();
  } else if (test.webkitRequestFullScreen) {
    document.addEventListener('webkigfullscreenchange', ready);
    test.webkitRequestFullScreen();
  }
}, false);

function ready() {
  full = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
  full.innerHTML = full.offsetHeight + 'x' + full.offsetWidth;
  setTimeout(function() {
    full.innerHTML += + '<br>' +
      full.offsetHeight + 'x' + full.offsetWidth;
  }, 500);
}