customize the look of dynamically created DIVs

Question

The script creates a random number of divs (in range 20-40) and puts some text in every single div. The script calculates the width of divs so that they fit in a single row. The height should be equal to the width - every div must be a square. Here's the code:

var quantity = Math.floor(Math.random() * (40 - 20 + 1)) + 20;


for (var i = 0; i < quantity; i++) {
  var elem = document.createElement("div");
  elem.className = "part";
  elem.id = 'p' + i;
  document.getElementById("scale").appendChild(elem);
}

var parts = document.getElementsByClassName("part");

for (var i = 0; i < parts.length; i++) {
  parts[i].style.fontSize = (500 / quantity) + 'px';
  parts[i].style.lineHeight = (460 / quantity) + 'px';

  parts[i].textContent = ("block #" + (i + 1));
}

for (var i = 0; i < parts.length; i++) {
  parts[i].style.height = parts[i].style.width;
}

let text = document.getElementById('txt');
text.textContent = 'BLOCKS: ' + quantity;

body {
  margin: 0;
}

#scale {
  position: absolute;
  display: table;
  width: 100%;
  top: 50%;
  transform: translateY(-100%);
  table-layout: fixed;
  border-spacing: 1px;
}

.part {
  display: table-cell;
  background-color: #a9cce3;
  padding: 3px;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 2px;
  overflow: hidden;
}

#txt {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 20px;
  transform: translateX(-50%);
  font-size: 18px;
  font-family: 'Arial', sans-serif;
}

<div id="scale"> </div>

<div id='txt'> </div>

The first problem is the divs are not always square. The second problem is I can't properly set the font size depending on a div size, so text fits a div. I think that's the worst solution

parts[i].style.fontSize = (500 / quantity) + 'px';
parts[i].style.lineHeight = (460 / quantity) + 'px';

Answer 1

There were two problems with the code:

1. To get element with use .clientWidth because style.width can be accessed when you have set that but in your code, I couldn't see you are doing so.
2. Second use font size in per cent, I don't think line-height is required. To make it centre use CSS as in example follows.

Use following:

var quantity = Math.floor(Math.random() * (40 - 20 + 1)) + 20;


for (var i = 0; i < quantity; i++) {
  var elem = document.createElement("div");
  elem.className = "part";
  elem.id = 'p' + i;
  document.getElementById("scale").appendChild(elem);
}

var parts = document.getElementsByClassName("part");

for (var i = 0; i < parts.length; i++) {
  parts[i].style.fontSize = (500 / quantity) + '%';
  parts[i].style.lineHeight = (460 / quantity) + '%';

  parts[i].textContent = ("block #" + (i + 1));
}

for (var i = 0; i < parts.length; i++) {
  parts[i].style.height = parts[i].clientWidth + "px";
}

let text = document.getElementById('txt');
text.textContent = 'BLOCKS: ' + quantity;

body {
  margin: 0;
}

#scale {
  position: absolute;
  display: table;
  width: 100%;
  top: 50%;
  transform: translateY(-100%);
  table-layout: fixed;
  border-spacing: 1px;
}

.part {
  display: table-cell;
  background-color: #a9cce3;
  padding: 3px;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 2px;
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
}

#txt {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 20px;
  transform: translateX(-50%);
  font-size: 18px;
  font-family: 'Arial', sans-serif;
}

<div id="scale"> </div>

<div id='txt'> </div>

Or if you don't want to use your text font to be reduced like this use following:

.part {
      display: table-cell;
      background-color: #a9cce3;
      padding: 3px;
      box-sizing: border-box;
      border: 1px solid black;
      border-radius: 2px;
      overflow: hidden;
      vertical-align: middle;
      text-align: center;
       text-overflow: ellipsis;
       overflow: hidden;
      white-space: nowrap; 
    }