JSFiddle - React, Tailwind, and code Playground

by ajai jothi

JavaScript

//orientation.js
function Orientation() {

}
Orientation.prototype.getCurrentDevice = function() {
  var DEVICE_TYPE = {
    DESKTOP: 'Desktop',
    MOBILE: 'Mobile'
  };
  var size = this.getWindowSize();

  return (size.width < 768) ? DEVICE_TYPE.MOBILE : DEVICE_TYPE.DESKTOP;
};
Orientation.prototype.getWindowSize = function() {
  return {
    width: $(window).width(),
    height: $(window).height()
  };
};
Orientation.prototype.exec = function() {
  var self = this;
  $(window).on('resize', function() {
    var current_device = self.getCurrentDevice();
    self[current_device]();
  }).trigger('resize');
};


//slider.js
function Slider() {

}
Slider.prototype = Object.create(Orientation.prototype);
Slider.prototype.constructor = Slider;

Slider.prototype.Mobile = function() {
  var size = this.getWindowSize();
  //ur size calcualtion if any
  console.log('slider mobile');
};
Slider.prototype.Desktop = function() {
  var size = this.getWindowSize();
  //ur size calcualtion if any
  console.log('slider desktop');
};
Slider.prototype.init = function() {
  this.exec();
};

//navbar.js
function NavBar() {

}
NavBar.prototype = Object.create(Orientation.prototype);
NavBar.prototype.constructor = Slider;

NavBar.prototype.Mobile = function() {
  var size = this.getWindowSize();
  console.log('NavBar mobile');
  //ur size calcualtion if any
};
NavBar.prototype.Desktop = function() {
  var size = this.getWindowSize();
  console.log('NavBar desktop');
  //ur size calcualtion if any
};
NavBar.prototype.init = function() {
  this.exec();
};


//init.js
(new Slider()).init();
(new NavBar()).init();