Stopwatch App

Click start button to begin. Click stop button when elapsed time is between 4.7 and 5.3 seconds. Keep trying and see how many successful attempts you can make!
人生の敗者
<!DOCTYPE html>
<html>
<head>
	<title>Stopwatch App</title>
	<style type="text/css">
		body {
			font-family: sans-serif;
			text-align: center;
		}

		h1 {
			margin-top: 50px;
		}

		#timer {
			font-size: 50px;
			margin-top: 100px;
		}

		#result {
			font-size: 20px;
			margin-top: 20px;
		}

		#loser {
			display: none;
			font-size: 100px;
			margin-top: 100px;
			animation: rotate 2s linear infinite;
		}

		@keyframes rotate {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(360deg);
			}
		}
	</style>
</head>
<body>
	<h1>Stopwatch App</h1>
	<p>Click start button to begin. Click stop button when elapsed time is between 4.7 and 5.3 seconds. Keep trying and see how many successful attempts you can make!</p>
	<button onclick="startStopwatch()">Start</button>
	<button onclick="stopStopwatch()">Stop</button>
	<div id="timer"></div>
	<div id="result"></div>
	<div id="loser">人生の敗者</div>
	<script type="text/javascript">
		var startTime, endTime, timerInterval, successCount = 0;

		function startStopwatch() {
			startTime = new Date();
			timerInterval = setInterval(updateTimer, 10);
		}

		function updateTimer() {
			var current = new Date();
			var elapsedTime = (current - startTime) / 1000;
			document.getElementById("timer").innerHTML = elapsedTime.toFixed(1) + "s";
		}

		function stopStopwatch() {
			endTime = new Date();
			clearInterval(timerInterval);
			checkSuccess();
		}

		function checkSuccess() {
			var elapsedTime = (endTime - startTime) / 1000;
			if (elapsedTime >= 4.7 && elapsedTime <= 5.3) {
				successCount++;
				document.getElementById("result").innerHTML = "Success! " + successCount + " consecutive successful attempts";
			} else {
				document.getElementById("result").innerHTML = "Fail...";
				document.getElementById("loser").style.display = "block";
			}
		}
	</script>
</body>
</html>