<!DOCTYPE html>
<html>
<head>
<title>ノギスの測定値を揃えるアプリ</title>
</head>
<body>
<h1>ノギスの測定値を揃えるアプリ</h1>
<form id="inputForm" onsubmit="calculate(); return false;">
<label for="a">A:</label>
<input type="number" id="a" required>
<label for="apostrophe">A':</label>
<input type="number" id="apostrophe" required>
<br>
<label for="b">B:</label>
<input type="number" id="b" required>
<<label for="bapostrophe">B':</label>
<input type="number" id="bapostrophe" required>
<br>
<label for="c">C:</label>
<input type="number" id="c" required>
<label for="capostrophe">C':</label>
<input type="number" id="capostrophe" required>
<br>
<label for="d">D:</label>
<input type="number" id="d" required>
<label for="dapostrophe">D':</label>
<input type="number" id="dapostrophe" required>
<br>
<br>
<label for="x1">右上x1:</label>
<input type="number" id="x1" required>
<label for="x2">右下x2:</label>
<input type="number" id="x2" required>
<label for="x3">左上x3:</label>
<input type="number" id="x3" required>
<label for="x4">左下x4:</label>
<input type="number" id="x4" required>
<br>
<label for="y1">右上y1:</label>
<input type="number" id="y1" required>
<label for="y2">右下y2:</label>
<input type="number" id="y2" required>
<label for="y3">左上y3:</label>
<input type="number" id="y3" required>
<label for="y4">左下y4:</label>
<input type="number" id="y4" required>
<br>
<br>
<input type="submit" value="計算する">
</form>
<div id="resultDiv" style="display: none;">
<h2>結果</h2>
<table>
<tr>
<td>A:</td>
<td id="aResult"></td>
<td>A':</td>
<td id="apostropheResult"></td>
</tr>
<tr>
<td>B:</td>
<td id="bResult"></td>
<td>B':</td>
<td id="bapostropheResult"></td>
</tr>
<tr>
<td>C:</td>
<td id="cResult"></td>
<td>C':</td>
<td id="capostropheResult"></td>
</tr>
<tr>
<td>D:</td>
<td id="dResult"></td>
<td>D':</td>
<td id="dapostropheResult"></td>
</tr>
</table>
<br>
<h3>計算履歴</h3>
<ul id="historyList"></ul>
</div>
<script>
function calculate() {
// 入力値を取得する
const a = parseFloat(document.getElementById("a").value);
const apostrophe = parseFloat(document.getElementById("apostrophe").value);
const b = parseFloat(document.getElementById("b").value);
const bapostrophe = parseFloat(document.getElementById("bapostrophe").value);
const c = parseFloat(document.getElementById("c").value);
const capostrophe = parseFloat(document.getElementById("capostrophe").value);
const d = parseFloat(document.getElementById("d").value);
const dapostrophe = parseFloat(document.getElementById("dapostrophe").value);
const x1 = parseFloat(document.getElementById("x1").value);
const x2 = parseFloat(document.getElementById("x2").value);
const x3 = parseFloat(document.getElementById("x3").value);
const x4 = parseFloat(document.getElementById("x4").value);
const y1 = parseFloat(document.getElementById("y1").value);
const y2 = parseFloat(document.getElementById("y2").value);
const y3 = parseFloat(document.getElementById("y3").value);
const y4 = parseFloat(document.getElementById("y4").value);
// 計算する
const x1x3 = (x1 - x3) / 2;
const x2x4 = (x2 - x4) / 2;
const y1y2 = (y1 - y2) / 2;
const y3y4 = (y3 - y4) / 2;
let message = "";
if (x1x3 < 0) {
message += "左に";
} else if (x1x3 > 0) {
message += "右に";
}
if (x1x3 !== 0) {
message += Math.abs(x1x3) + "移動させて、";
}
message += "左上x3と右上x1が揃います。";
if (x2x4 < 0) {
message += "左に";
} else if (x2x4 > 0) {
message += "右に";
}
if (x2x4 !== 0) {
message += Math.abs(x2x4) + "移動させて、";
}
message += "右下x2と左下x4が揃います。";
if (y1y2 < 0) {
message += "下に";
} else if (y1y2 > 0) {
message += "上に";
}
if (y1y2 !== 0) {
message += Math.abs(y1y2) + "移動させて、";
}
message += "右上y1と右下y2が揃います。";
if (y3y4 < 0) {
message += "下に";
} else if (y3y4 > 0) {
message += "上に";
}
if (y3y4 !== 0) {
message += Math.abs(y3y4) + "移動させて、";
}
message += "左上y3と左下y4が揃います。";
// 結果を表示する
document.getElementById("aResult").textContent = a + x1x3;
document.getElementById("apostropheResult").textContent = apostrophe + x2x4;
document.getElementById("bResult").textContent = b + x2x4;
document.getElementById("bapostropheResult").textContent = bapostrophe + x1x3;
document.getElementById("cResult").textContent = c + y3y4;
document.getElementById("capostropheResult").textContent = capostrophe + y3y4;
document.getElementById("dResult").textContent = d + y1y2;
document.getElementById("dapostropheResult").textContent = dapostrophe + y1y2;
// 計算履歴に追加する
const historyItem = document.createElement("li");
historyItem.textContent = message;
document.getElementById("historyList").appendChild(historyItem);
// 結果を表示する
document.getElementById("resultDiv").style.display = "block";
}
</script>
</body>
</html>
