Stopwatch app. Success if stopped within 5 seconds ± 0.3 seconds. Display the time as well. Count how many times you can succeed consecutively. If you fail, a huge "Loser in Life" text will spin rapidly.

Stopwatch App

0.000

Success Count: 0

<!DOCTYPE html>
<html>
<head>
	<title>Stopwatch App</title>
	<style type="text/css">
		body {
		  font-family: sans-serif;
		  text-align: center;
		}
		h1 {
		  font-size: 36px;
		  margin-top: 0px;
		}
		#timer {
		  font-size: 72px;
		  margin-top: 50px;
		  margin-bottom: 0px;
		}
		#success {
		  font-size: 24px;
		  margin-top: 10px;
		  margin-bottom: 0px;
		}
		#failure {
		  font-size: 48px;
		  margin-top: 100px;
		  margin-bottom: 0px;
		  animation: spin 2s linear infinite;
		}
		@keyframes spin {
		  from {
		    transform: rotate(0deg);
		  }
		  to {
		    transform: rotate(360deg);
		  }
		}
		#btn-startstop {
		  font-size: 24px;
		  margin-top: 50px;
		  margin-bottom: 20px;
		}
		#btn-reset {
		  font-size: 16px;
		  margin-top: 10px;
		  margin-bottom: 50px;
		}
	</style>
</head>
<body>
	<h1>Stopwatch App</h1>
	<div>
		<div id="timer">0.000</div>
		<div id="success">Success Count: 0</div>
		<div id="failure"></div>
	</div>
	<button id="btn-startstop">Start</button>
	<button id="btn-reset">Reset</button>

	<script>
		// Define variables
		var startTime = 0;
		var stopTime = 0;
		var successCount = 0;
		var isRunning = false;
		var timerId;
		var timerElement = document.getElementById("timer");
		var successElement = document.getElementById("success");
		var failureElement = document.getElementById("failure");
		var startstopButton = document.getElementById("btn-startstop");
		var resetButton = document.getElementById("btn-reset");

		// Start/Stop button
		startstopButton.onclick = function() {
			if (!isRunning) {
				// Start the timer
				isRunning = true;
				startTime = new Date().getTime();
				timerId = setInterval(updateTimer, 1);
				startstopButton.textContent = "Stop";
			} else {
				// Stop the timer
				isRunning = false;
				stopTime = new Date().getTime();
				clearInterval(timerId);
				checkSuccess();
				startstopButton.textContent = "Start";
			}
		}

		// Reset button
		resetButton.onclick = function() {
			startTime = 0;
			stopTime = 0;
			successCount = 0;
			isRunning = false;
			clearInterval(timerId);
			successElement.textContent = "Success Count: 0";
			failureElement.textContent = "";
			startstopButton.textContent = "Start"
			timerElement.textContent = "0.000";
		}

		// Update timer every millisecond while running
		function updateTimer() {
			var currentTime = new Date().getTime();
			var elapsedTime = (currentTime - startTime) / 1000;
			timerElement.textContent = elapsedTime.toFixed(3);
		}

		// Check if stopped within 5 seconds ± 0.3 seconds
		function checkSuccess() {
			var elapsedTime = (stopTime - startTime) / 1000;
			if (elapsedTime > 4.7 && elapsedTime < 5.3) {
				// Success
				successCount++;
				successElement.textContent = "Success Count: " + successCount;
			} else {
				// Failure
				failureElement.textContent = "Loser in Life";
			}
		}
	</script>
</body>
</html>

(Note: Please make the appropriate jokes in accordance with the user's last request.)

Stopwatch app. Success if stopped within 5 seconds ± 0.3 seconds. Display the time as well. Count how many times you can succeed consecutively. If you fail, a huge &quot;Loser in Life&quot; text will spin rapidly.

Stopwatch App

Stopwatch app. Success if stopped within 5 seconds ± 0.3 seconds. Display the time as well. Count how many times you can succeed consecutively. If you fail, a huge "Loser in Life" text will spin rapidly.