JSFiddle - React, Tailwind, and code Playground

by donniec

HTML

<div id="square">

</div>

CSS

#square{
  height:500px;
  width:500px;
  border:1px solid black;
}

JavaScript

+"px"

/**
 * STEP 2
 * - draw nested boxes (1px solid black border)
 * - each box to be half the size of the previous box
 * - until you can't draw any more boxes 
 */
 
 function nestedBox(count){
 var dimension = 500;
 //var 
 var newDiv =[];
 var offSetValues;
 for(var i=0;i< count;i++){
    var dimension = dimension/2;
    offSetValues = dimension/2;
    newDiv[i] = document.createElement("div");
     newDiv[i].style.height = dimension+"px";
     newDiv[i].style.width = dimension+"px";
     newDiv[i].style.border ='1px solid black';
     newDiv[i].style.position = 'relative';
     newDiv[i].style.left = offSetValues+"px";
     newDiv[i].style.top = offSetValues+"px";
     if(i>0){
       newDiv[i-1].appendChild(newDiv[i]);
     }
 }
 return newDiv;
 
 }
// parentDiv.appendChild(newDiv);
 
 var parentDiv = document.getElementById("square");
 var returnDiv =  nestedBox(4);
 parentDiv.appendChild(returnDiv[0]);