<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind Stopwatch</title>
<link href=
rel="stylesheet">
<script src=
</head>
<body class="bg-gray-200">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-10">
<div class="max-w-xl mx-auto bg-white
rounded overflow-hidden shadow-lg">
<div class="px-6 py-4">
<div class="font-bold text-xl
mb-2 text-center">Tailwind Stopwatch</div>
<div class="text-center" id="time">
<span class="text-6xl" id="hr">00</span>
<span class="text-xl">Hr</span>
<span class="text-6xl" id="min">00</span>
<span class="text-xl">Min</span>
<span class="text-6xl" id="sec">00</span>
<span class="text-xl">Sec</span>
<span class="text-6xl" id="count">00</span>
</div>
<div class="mt-6 flex justify-center">
<button class="bg-green-500 hover:bg-green-700
text-white font-bold py-2 px-4 rounded mr-2"
id="start">Start</button>
<button class="bg-blue-500 hover:bg-blue-700
text-white font-bold py-2 px-4 rounded mr-2"
id="stop">Stop</button>
<button class="bg-red-500 hover:bg-red-700
text-white font-bold py-2 px-4 rounded"
id="reset">Reset</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
let hour = 0;
let minute = 0;
let second = 0;
let count = 0;
let timer;
$('#start').on('click', function () {
// Check if the timer is already running
if (!timer) {
timer = setInterval(stopWatch, 10);
}
});
$('#stop').on('click', function () {
clearInterval(timer);
timer = null; // Reset timer variable
});
$('#reset').on('click', function () {
clearInterval(timer);
timer = null; // Reset timer variable
hour = 0;
minute = 0;
second = 0;
count = 0;
updateDisplay();
});
function stopWatch() {
count++;
if (count == 100) {
second++;
count = 0;
}
if (second == 60) {
minute++;
second = 0;
}
if (minute == 60) {
hour++;
minute = 0;
second = 0;
}
updateDisplay();
}
function updateDisplay() {
$('#hr').text(hour.toString().padStart(2, '0'));
$('#min').text(minute.toString().padStart(2, '0'));
$('#sec').text(second.toString().padStart(2, '0'));
$('#count').text(count.toString().padStart(2, '0'));
}
});
</script>
</body>
</html>