swirl

by Nabaraj Saha

HTML

<div id="boxCon"></div>

CSS

*{
  box-sizing:border-box;
}
#boxCon{
  display:flex;
  flex-wrap:wrap;
}
#boxCon div{
  border:1px solid;
  text-align:center;
  padding:5px;
}

JavaScript

let box ="", row=0;
function swirl(tot){
	let sqrt = Math.sqrt(tot);
  let width = 100/sqrt;
  if(sqrt!==Math.floor(sqrt)){
  	return "Not Possible"
  }
  for(let i=tot; i>0; i-=sqrt){
  	if(i%sqrt===0){
    row++;
    }
    if(row%2===0){
        console.log("row ", row);
    	for(let j = i-(sqrt-1); j<=i; j++){
            // console.log(j,i);
            box = box+`<div style="width:${width}%">${j}</div>`
    	}
        //  console.log(i, i-(sqrt-1))
    }else{
        for(let j = i; j>i-sqrt; j--){
            box = box+`<div style="width:${width}%">${j}</div>`;
    	}
    }
  	/* box = box+i */
  }
  /* console.log(box) */
  return box;
	/* return box */
}
/* console.log(swirl(9)); */
document.querySelector("#boxCon").innerHTML=swirl(100)