JSFiddle - React, Tailwind, and code Playground

by uiwwnw

HTML

<div class="full">
  <div class="row">1</div>
  <div class="row">2</div>
  <div class="row">3</div>
  <div class="row">4</div>
</div>
<div class="full">
  <div class="row">a</div>
  <div class="row">b</div>
  <div class="row">c</div>
  <div class="row">d</div>
</div>
<div class="full">
  <div class="row">a</div>
  <div class="row">b</div>
  <div class="row">c</div>
  <div class="row">d</div>
</div>

SCSS

body {
  margin: 0;
}

TypeScript

class FullScreen {
	private el:any;
  static height: number;
  static width: number;
  constructor(el) {
  	this.el = document.querySelectorAll(el);
    this.init();
    this.setSize();
    FullScreen.getBrowserSize.call(this);
    FullScreen.getKeyUp.call(this);
  }
  private init() {
  	document.querySelector('body').style.overflow = 'hidden';
  }
  private setSize() {
  	FullScreen.height = window.innerHeight;
    FullScreen.width = window.innerWidth;
  	this.el.forEach((el)=>{
    	el.style.height = FullScreen.height + 'px';
    });
  }
  private setKey (event) {
  	switch(event.keyCode) {
    	case 37:
      	//left
      	break;
      case 38:
      	//up
      	break;
      case 39:
				//right
      	break;
      case 40:
      	//down
      	break;
    }
  }
  static getBrowserSize() {
  	window.onresize = this.setSize.bind(this);
  }
  static getKeyUp() {
  	window.onkeyup = this.setKey.bind(this);
  }
}

const a = new FullScreen('.full');
console.log(a);