Golf CSS lengths

by phloe

HTML

<div style="width:100mm">mm</div>
<div style="width:5in">in</div>
<div style="width:200pt">pt</div>
<div style="width:20em">em</div>
<div style="width:20pc">pc</div>
<div style="width:50ex">ex</div>
<div style="width:50ch">ch</div>
<div style="width:250q">q</div>

<input type="text" id="input" />

<output id="output"></output>

CSS

div {
  background: lightgray;
  height: 100px;
  margin: 5px;
  white-space: nowrap;
}

JavaScript

var units = [...document.querySelectorAll("div")].map(
	(element) => {
  	const { width } = element.getBoundingClientRect();
    const style = element.getAttribute("style");
    let [, amount, unit] = style.match(/^width:(\d+)(\D+)$/);
    let value = amount ? width / parseInt(amount, 10) : 0;
    return { unit, value, element };
  }
);

input.oninput = function(event) {
	let width = parseInt(input.value, 10);
  units.forEach(
  	({ unit, value, element }) => {
    	let amount = Math.floor(width / value);
      element.innerText = `${amount}${unit} (${Math.round(amount * value)})\n${amount}${unit} (${amount * value})\n${amount + 1}${unit} (${Math.round((amount + 1) * value)})`;
    	element.style = `width:${amount}${unit}`;
    }
  );
};