Nogisu measurement alignment app

<!DOCTYPE html>
<html>
<head>
	<title>Nogisu measurement alignment app</title>
</head>
<body>
	<h1>Nogisu measurement alignment app</h1>
	<p>Please enter the following values:</p>
	<form onsubmit="return calculate();">
		<label>A:</label>
		<input type="number" step="any" id="a" required><br>
		<label>A':</label>
		<input type="number" step="any" id="a1" required><br>
		<label>B:</label>
		<input type="number" step="any" id="b" required><br>
		<label>B':</label>
		<input type="number" step="any" id="b1" required><br>
		<label>C:</label>
		<input type="number" step="any" id="c" required><br>
		<label>C':</label>
		<input type="number" step="any" id="c1" required><br>
		<label>D:</label>
		<input type="number" step="any" id="d" required><br>
		<label>D':</label>
		<input type="number" step="any" id="d1" required><br><br>
		<p>Please enter the following measurements:</p>
		<label>x1:</label>
		<input type="number" step="any" id="x1" required><br>
		<label>x2:</label>
		<input type="number" step="any" id="x2" required><br>
		<label>x3:</label>
		<input type="number" step="any" id="x3" required><br>
		<label>x4:</label>
		<input type="number" step="any" id="x4" required><br>
		<label>y1:</label>
		<input type="number" step="any" id="y1" required><br>
		<label>y2:</label>
		<input type="number" step="any" id="y2" required><br>
		<label>y3:</label>
		<input type="number" step="any" id="y3" required><br>
		<label>y4:</label>
		<input type="number" step="any" id="y4" required><br><br>
		<button type="submit">Calculate</button>
		<button type="button" onclick="showHistory()">Show History</button>
	</form>
	<p id="result"></p>
	<p id="history"></p>
	<script>
		let history = [];

		function calculate() {
			let a = Number(document.getElementById("a").value);
			let a1 = Number(document.getElementById("a1").value);
			let b = Number(document.getElementById("b").value);
			let b1 = Number(document.getElementById("b1").value);
			let c = Number(document.getElementById("c").value);
			let c1 = Number(document.getElementById("c1").value);
			let d = Number(document.getElementById("d").value);
			let d1 = Number(document.getElementById("d1").value);

			let x1 = Number(document.getElementById("x1").value);
			let x2 = Number(document.getElementById("x2").value);
			let x3 = Number(document.getElementById("x3").value);
			let x4 = Number(document.getElementById("x4").value);
			let y1 = Number(document.getElementById("y1").value);
			let y2 = Number(document.getElementById("y2").value);
			let y3 = Number(document.getElementById("y3").value);
			let y4 = Number(document.getElementById("y4").value);

			let result = "";

			let x1To3 = (x1 - x3) / 2;
			let x2To4 = (x2 - x4) / 2;
			let y1To2 = (y1 - y2) / 2;
			let y3To4 = (y3 - y4) / 2;

			if (x1To3 < 0) {
				result += "Left " + Math.abs(x1To3) + "mm, ";
			} else if (x1To3 === 0) {
				result += "Same, ";
			} else {
				result += "Right " + x1To3 + "mm, ";
			}

			if (x2To4 < 0) {
				result += "Left " + Math.abs(x2To4) + "mm, ";
			} else if (x2To4 === 0) {
				result += "Same, ";
			} else {
				result += "Right " + x2To4 + "mm, ";
			}

			if (y1To2 < 0) {
				result += "Up " + Math.abs(y1To2) + "mm, ";
			} else if (y1To2 === 0) {
				result += "Same, ";
			} else {
				result += "Down " + y1To2 + "mm, ";
			}

			if (y3To4 < 0) {
				result += "Up " + Math.abs(y3To4) + "mm.";
			} else if (y3To4 === 0) {
				result += "Same.";
			} else {
				result += "Down " + y3To4 + "mm.";
			}

			result = "A: " + (a + x1To3) + "mm, A': " + (a1 + x1To3) + "mm, B: " +
				(b + x2To4) + "mm, B': " + (b1 + x2To4) + "mm, C: " + (c + y3To4) +
				"mm, C': " + (c1 + y3To4) + "mm, D: " + (d + y1To2) +
				"mm, D': " + (d1 + y1To2) + "mm. Alignment: " + result;

			history.push(result);

			document.getElementById("result").innerHTML = result;
			return false;
		}

		function showHistory() {
			document.getElementById("history").innerHTML = "History: <br>" + history.join("<br>");
		}
	</script>
</body>
</html>

**ジョーク：**
Why was the measuring tape feeling depressed? Because it couldn't measure up.