JSFiddle - React, Tailwind, and code Playground

by maremp

HTML

<div id="doc-element"></div>
<div id="dimensions"></div>

CSS

#doc-element {
    width: 50px;
    height: 50px;
}

#doc-element.portrait {
    background: red;
}

#doc-element.landscape {
    background: blue;
}

JavaScript

_doc_element = document.getElementById('doc-element');

_addClass = function(className) {
  if (_doc_element.classList)
    _doc_element.classList.add(className);
  else
    _doc_element.className += ' ' + className;
}

_removeClass = function(className) {
  if (_doc_element.classList)
    _doc_element.classList.remove(className);
  else
    _doc_element.className = _doc_element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');   
}

// get dimensions
_getScreenWidth = function() {
  var screenWidth = window.innerWidth;
  var screenHeight = window.innerHeight;
  var el = document.getElementById('dimensions');
  _handleOrientation();
  el.innerHTML = 'Width: '+ screenWidth +' :: Height: '+ screenHeight + "<br /><br />" + _doc_element.className;
};

_isLandscape = function() {
  return window.innerWidth > window.innerHeight;
}
 
// portait or landscape
_handleOrientation = function() {
 if (_isLandscape()) {
  _removeClass("portrait");
  return _addClass("landscape");
 } else {
  _removeClass("landscape");
  return _addClass("portrait");
 }
 
};

// resize event
var resizeTimeout;
window.onresize = function() {
  clearTimeout(resizeTimeout);
  // handle normal resize
  resizeTimeout = setTimeout(function() {
    _getScreenWidth();
  }, 250); // 250ms delay
}