木を育てる

水をやって木を育てましょう！
水の量：
50
日光の量：
50
現在の木の大きさ：1
現在の葉の枚数：1
<!DOCTYPE html>
<html>
<head>
	<title>木を育てる</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>木を育てる</h1>
	<p>水をやって木を育てましょう！</p>
	<div>
		<label for="waterLevel">水の量：</label>
		<input type="range" id="waterLevel" name="waterLevel" min="0" max="100" value="50"><br>
		<span id="waterLevelValue">50</span>
	</div>
	<div>
		<label for="sunlightLevel">日光の量：</label>
		<input type="range" id="sunlightLevel" name="sunlightLevel" min="0" max="100" value="50"><br>
		<span id="sunlightLevelValue">50</span>
	</div>
	<p>現在の木の大きさ：<span id="treeSize">1</span></p>
	<p>現在の葉の枚数：<span id="leafCount">1</span></p>
	<script>
		let waterLevelValue = document.getElementById("waterLevelValue");
		let sunlightLevelValue = document.getElementById("sunlightLevelValue");
		let treeSize = document.getElementById("treeSize");
		let leafCount = document.getElementById("leafCount");

		function calculateTreeSize(waterLevel, sunlightLevel) {
			let newTreeSize = Math.floor((waterLevel + sunlightLevel) / 2);
			if (newTreeSize > 100) {
				newTreeSize = 100;
			}
			return newTreeSize;
		}

		function calculateLeafCount(treeSize) {
			let newLeafCount = Math.floor(treeSize / 10) + 1;
			return newLeafCount;
		}

		document.getElementById("waterLevel").addEventListener("change", function() {
			let waterLevel = this.value;
			waterLevelValue.innerHTML = waterLevel;
			let sunlightLevel = document.getElementById("sunlightLevel").value;
			let newTreeSize = calculateTreeSize(waterLevel, sunlightLevel);
			let newLeafCount = calculateLeafCount(newTreeSize);
			treeSize.innerHTML = newTreeSize;
			leafCount.innerHTML = newLeafCount;
		});

		document.getElementById("sunlightLevel").addEventListener("change", function() {
			let sunlightLevel = this.value;
			sunlightLevelValue.innerHTML = sunlightLevel;
			let waterLevel = document.getElementById("waterLevel").value;
			let newTreeSize = calculateTreeSize(waterLevel, sunlightLevel);
			let newLeafCount = calculateLeafCount(newTreeSize);
			treeSize.innerHTML = newTreeSize;
			leafCount.innerHTML = newLeafCount;
		});
	</script>
</body>
</html>

※ジョークはありません。