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
Stopwatch App
Stop the stopwatch within 5 seconds with ± 0.3 seconds accuracy to succeed. Count how many times you can succeed consecutively.
0.000
Success Count: 0
Loser in Life
<!DOCTYPE html>
<html>
<head>
<title>Stopwatch App</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
#timer {
font-size: 80px;
margin-top: 30px;
}
#success-count {
margin-top: 20px;
}
#loser-text {
font-size: 200px;
font-weight: bold;
color: red;
display: none;
}
.success {
color: green;
}
.fail {
color: red;
}
</style>
</head>
<body>
<h1>Stopwatch App</h1>
<p>Stop the stopwatch within 5 seconds with ± 0.3 seconds accuracy to succeed. Count how many times you can succeed consecutively.</p>
<button id="stopwatch-button">Start / Stop</button>
<div id="timer">0.000</div>
<div id="success-count">Success Count: 0</div>
<div id="loser-text">Loser in Life</div>
<script type="text/javascript">
let stopwatch;
let startTime;
let stopTime;
let successCount = 0;
let isRunning = false;
document.getElementById('stopwatch-button').addEventListener('click', function() {
if (!isRunning) {
// Start stopwatch
startTime = Date.now();
isRunning = true;
this.innerText = 'Stop';
} else {
// Stop stopwatch
stopTime = Date.now();
isRunning = false;
this.innerText = 'Start / Stop';
checkSuccess();
}
});
function checkSuccess() {
let timeDiff = (stopTime - startTime) / 1000;
document.getElementById('timer').innerText = timeDiff.toFixed(3);
if (timeDiff > 4.7 && timeDiff < 5.3) {
// Success
successCount++;
document.getElementById('success-count').innerText = `Success Count: ${successCount}`;
document.getElementById('timer').classList.add('success');
setTimeout(function() {
document.getElementById('timer').classList.remove('success');
}, 300);
} else {
// Fail
successCount = 0;
document.getElementById('success-count').innerText = `Success Count: ${successCount}`;
document.getElementById('timer').classList.add('fail');
document.getElementById('loser-text').style.display = 'block';
setTimeout(function() {
document.getElementById('timer').classList.remove('fail');
document.getElementById('loser-text').style.display = 'none';
}, 2000);
}
}
</script>
</body>
</html>
/*
Q. Why did the stopwatch attend the race?
A. To get a-head in life.
*/