01stack-calculator.css

.settings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px dashed #555;
}
.number-input {
  width: 100px;
  padding: 0 2px;
  margin: 0 4px;
}
.calculator {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
.calculator__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px;
}
.calculator-label {
  padding: 0 4px;
  margin-bottom: 4px;
  color: #2c9400;
  border: 1px solid #2c9400;
}
.output {
  padding: 0 4px;
  border: 1px solid #333;
  font-weight: bold;
}

02stack-calculator.html

<div class="settings">
  1スタックあたりの個数
  <input
    type="number"
    min="1"
    placeholder="64"
    value="64"
    id="stack-unit-input"
    class="number-input"
  />個
</div>
<div class="calculator">
  <div class="calculator__row">
    <div class="calculator-label">スタック数+端数→個数</div>
    <div>
      <input
        type="number"
        min="0"
        value=""
        placeholder="1"
        id="stack-input"
        class="number-input"
      />スタック
    </div>
    ＋
    <div>
      <input
        type="number"
        min="0"
        value="0"
        placeholder="0"
        id="fraction-input"
        class="number-input"
      />個
    </div>
    ‖
    <span id="piece-output" class="output"></span>
  </div>
  <div class="calculator__row">
    <div class="calculator-label">個数→スタック数+端数</div>
    <div>
      <input
        type="number"
        min="0"
        value=""
        placeholder="1"
        id="piece-input"
        class="number-input"
      />個
    </div>
    ‖
    <span id="stack-output" class="output"></span>
  </div>
</div>

03stack-calculator.js

const stackUnitInput = document.getElementById('stack-unit-input');
const stackInput = document.getElementById('stack-input');
const fractionInput = document.getElementById('fraction-input');
const stackOutput = document.getElementById('stack-output');
const pieceInput = document.getElementById('piece-input');
const pieceOutput = document.getElementById('piece-output');

stackUnitInput.addEventListener('input', () => {
  stackToPiece();
  pieceToStack();
});
stackInput.addEventListener('input', stackToPiece);
fractionInput.addEventListener('input', stackToPiece);
pieceInput.addEventListener('input', pieceToStack);
stackToPiece();
pieceToStack();

function stackToPiece() {
  const stackUnit = Number(stackUnitInput.value);
  if (Number.isNaN(stackUnit) || stackUnit < 1) {
    pieceOutput.textContent = 'error';
    return;
  }
  //
  const stack = Number(stackInput.value);
  if (Number.isNaN(stack) || stack < 0) {
    pieceOutput.textContent = 'error';
    return;
  }
  const fraction = Number(fractionInput.value);
  if (Number.isNaN(fraction)) {
    pieceOutput.textContent = 'error';
    return;
  }
  const piece = stackUnit * stack + fraction;
  pieceOutput.textContent = piece + '個';
}

function pieceToStack() {
  const stackUnit = Number(stackUnitInput.value);
  if (Number.isNaN(stackUnit) || stackUnit < 1) {
    stackOutput.textContent = 'error';
    return;
  }
  //
  //
  const piece = Number(pieceInput.value);
  if (Number.isNaN(piece) || piece < 0) {
    stackOutput.textContent = 'error';
    return;
  }
  const stack = Math.floor(piece / stackUnit);
  const fraction = piece % stackUnit;
  stackOutput.textContent = `${stack}スタック+${fraction}個`;
}