JSFiddle - React, Tailwind, and code Playground

by businessintelligences4h

HTML

<html>
<body id="body">
  <!-- scala x : 0.1 scala y : 0.1 -->
<div id="grid"></div>
</body>
</html>

CSS

#body{
  margin:0;
}

#grid{
  display: block;
  width: 90vw;
  height: 90vh;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Test_grid_2000x2000.png/600px-Test_grid_2000x2000.png");
  background-size: 100% 100%;
}

.squareG{
  background:green;
  position: absolute;
}
.squareR{
  background:red;
  position: absolute;
}

JavaScript

var saures = [
  {h:100, w:100, x:0, y:0, r:0},
  {h:100, w:100, x:100, y:100, r:0},
  {h:100, w:100, x:200, y:200, r:0},
  {h:100, w:100, x:300, y:300, r:0},
  {h:100, w:100, x:400, y:400, r:90}
];
resize();
window.onresize = function(){
  var grid = document.getElementById("grid");
  grid.remove();var grid = document.createElement("DIV");grid.id = "grid";
  var body = document.getElementById("body");
  body.appendChild(grid);
  resize();
}

  
    
  function resize(){
    
var grid = document.getElementById("grid");
var centPerPixel_H =(grid.clientHeight * 0.1)/100;
var centPerPixel_W = ( grid.clientWidth * 0.1)/100;
console.log(centPerPixel_H);
for(var i=0; i<saures.length; i++){
  var square = document.createElement("DIV");
  square.setAttribute("class", "square");

  //square.style.transform = " rotate("+saures[i].r+"deg)";
  
  if(saures[i].r == 90){
    square.style.height = saures[i].w * centPerPixel_W+ "px";
    square.style.width = saures[i].h * centPerPixel_H + "px" ;
    square.style.left = saures[i].x * centPerPixel_W+ "px";
    square.style.top = saures[i].y * centPerPixel_H + "px";
      square.setAttribute("class", "squareR");
  }else{
    square.style.height = saures[i].h * centPerPixel_H + "px";
    square.style.width = saures[i].w * centPerPixel_W+ "px";
    square.style.left = saures[i].x * centPerPixel_W+ "px";
    square.style.top = saures[i].y * centPerPixel_H + "px";
      square.setAttribute("class", "squareG");
  }
  
  grid.appendChild(square);
}
  }