JSFiddle - React, Tailwind, and code Playground

HTML

<label>X:<input type="text" id="x"></label>
<label>Y:<input type="text" id="y"></label>
<p>
Unit: 
<label><input type="radio" name="unit" value="cm" checked/>cm</label><label><input type="radio" name="unit" value="mm" />mm</label>
</p>
<button type="button">
calc
</button>

JavaScript

var button = document.querySelector("button");
  button.addEventListener("click", function () {
  	var unit = document.querySelector("input[type=radio]:checked").value == "cm"
    	? 1
      : 10;
    var x = (document.getElementById("x").value || 0) / unit;
  	var y = (document.getElementById("y").value || 0) / unit;
    var boxesX = Math.floor(x / 20);
    var boxesY = Math.floor(y / 20);
    
    alert(boxesX * boxesY);
  });