ノギスの測定値を揃えるアプリ

このアプリを作ったプロンプト
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>ノギスの測定値を揃えるアプリ</title>
  <style>
    label {
      display: inline-block;
      width: 150px;
      margin-bottom: 10px;
    }
    
    input {
      width: 150px;
      padding: 5px;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <h1>ノギスの測定値を揃えるアプリ</h1>

  <form>
    <label for="x1">右上x1：</label>
    <input type="number" step="0.01" id="x1"><br>
    <label for="x2">左上x2：</label>
    <input type="number" step="0.01" id="x2"><br>
    <label for="x3">右下x3：</label>
    <input type="number" step="0.01" id="x3"><br>
    <label for="x4">左下x4：</label>
    <input type="number" step="0.01" id="x4"><br>
    <label for="y1">右上y1：</label>
    <input type="number" step="0.01" id="y1"><br>
    <label for="y2">右下y2：</label>
    <input type="number" step="0.01" id="y2"><br>
    <label for="y3">左上y3：</label>
    <input type="number" step="0.01" id="y3"><br>
    <label for="y4">左下y4：</label>
    <input type="number" step="0.01" id="y4"><br>
    <button type="button" onclick="calculate()">計算</button>
    <button type="button" onclick="showHistory()">履歴</button>
    <button type="button" onclick="reset()">リセット</button>
  </form>

  <div id="result"></div>

  <script>
    let results = [];

    function calculate() {
      let x1 = parseFloat(document.getElementById("x1").value);
      let x2 = parseFloat(document.getElementById("x2").value);
      let x3 = parseFloat(document.getElementById("x3").value);
      let x4 = parseFloat(document.getElementById("x4").value);
      let y1 = parseFloat(document.getElementById("y1").value);
      let y2 = parseFloat(document.getElementById("y2").value);
      let y3 = parseFloat(document.getElementById("y3").value);
      let y4 = parseFloat(document.getElementById("y4").value);

      let result = document.getElementById("result");

      let deltaX1 = (x1 - x2) / 2;
      let deltaX3 = (x3 - x4) / 2;
      let deltaY1 = (y1 - y2) / 2;
      let deltaY3 = (y3 - y4) / 2;

      let direction = "";

      if (deltaX1 < 0) {
        direction += "→に";
        deltaX1 *= -1;
      } else if (deltaX1 > 0) {
        direction += "←に";
      }

      if (deltaX3 < 0) {
        direction += "→に";
        deltaX3 *= -1;
      } else if (deltaX3 > 0) {
        direction += "←に";
      }

      if (deltaY1 < 0) {
        direction += "↑に";
        deltaY1 *= -1;
      } else if (deltaY1 > 0) {
        direction += "↓に";
      }

      if (deltaY3 < 0) {
        direction += "↑に";
        deltaY3 *= -1;
      } else if (deltaY3 > 0) {
        direction += "↓に";
      }

      let resultText = "x1-x2の差：" + deltaX1.toFixed(3) + "<br>"
        + "x3-x4の差：" + deltaX3.toFixed(3) + "<br>"
        + "y1-y2の差：" + deltaY1.toFixed(3) + "<br>"
        + "y3-y4の差：" + deltaY3.toFixed(3) + "<br>"
        + "方向：" + direction;

      result.innerHTML = resultText;

      let historyText = "x1=" + x1.toFixed(3) + ", x2=" + x2.toFixed(3) + ", x3=" + x3.toFixed(3) + ", x4=" + x4.toFixed(3) + ", y1=" + y1.toFixed(3) + ", y2=" + y2.toFixed(3) + ", y3=" + y3.toFixed(3) + ", y4=" + y4.toFixed(3) + "<br>"
        + resultText.replace(/<br>/g, "\n").replace(/<[^>]*>/g, "");

      results.push(historyText);
    }

    function showHistory() {
      let historyText = "";
      for (let i = 0; i < results.length; i++) {
        historyText += results[i].replace(/\n/g, "<br>") + "<br><br>";
      }
      document.getElementById("result").innerHTML = historyText;
    }

    function reset() {
      document.getElementById("x1").value = "";
      document.getElementById("x2").value = "";
      document.getElementById("x3").value = "";
      document.getElementById("x4").value = "";
      document.getElementById("y1").value = "";
      document.getElementById("y2").value = "";
      document.getElementById("y3").value = "";
      document.getElementById("y4").value = "";
      document.getElementById("result").innerHTML = "";
    }
  </script>
</body>

</html>