A stopwatch tracks elapsed time with precision. It starts counting when activated, halts when stopped, and resets to zero upon reset. It measures time in hours, minutes, seconds, and fractions. Stopwatch functionality aids in various activities such as sports timing, scientific experiments, and productivity monitoring.
Prerequisites
Approach
- The app is a stopwatch implemented using Tailwind CSS and jQuery.
- Features a visually appealing interface with rounded corners and a centered container.
- Displays hours, minutes, seconds, and fractions of a second.
- Users can start, stop, and reset the stopwatch using the corresponding buttons.
- Functionality handled by jQuery, updating time values every 10 milliseconds.
- The design utilizes Tailwind CSS for responsive styling across different screen sizes.
- Versatile for timing activities like sports events, cooking, or study sessions.
- Offers precise time measurement with intuitive controls and aesthetic presentation.
Example: This example shows the implementation of the above-explained approach.
HTML
<!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>
|
Output:
Recommended Articles