JSFiddle - React, Tailwind, and code Playground

by Uday Hiwarale

HTML

<div class="display">
    <canvas width="" height=""/>
</div>

SCSS

.display {
  padding: 20px 30px;
  background-color: #89AC33;
  color: red;
}

JavaScript

class Display {
	constructor( { pixelSize = 10, elem } = {} ) {
  	this.pixelSize = pixelSize;
    this.elem = elem;
  }
  
  calculateDisplayDimensions() {
  
  	// 5 pixels per block
    // 1 pixels block-gutter
    // 4 pixel-separator lines per block (each 0.25 pixel width)
    const width =  ((5 * 16) + (1 * 15) + ((4 * 16)/4) ) * this.pixelSize;
  	
    // 8 pixels per block
    // 2 pixels block-gutter
    // 7 pixel-separator lines per block (each 0.25 pixel width)
  	const height = ((8 * 2) + (2 * 1) + ((7 * 2)/4) ) * this.pixelSize;
    
    // return
    return { width, height };
  }
  
  
  render() {
  	
  }
  
  
}


class Block {

}