Stopwatch

Harjot
October 29, 2024
3:48 pm

Technologies used -

Description

This Stopwatch app provides an easy way to track time accurately. It features a clean interface with essential controls to start, stop, and reset the timer, displaying hours, minutes, and seconds. Ideal for timing various tasks or activities, this app runs directly in your browser.

Here’s a breakdown of the app’s main functions:

Time Calculation: Increments seconds, and adjusts minutes and hours as needed.
Start Function: Begins the stopwatch, updating the display every second.
Stop Function: Pauses the stopwatch, keeping the current time on display.
Reset Function: Clears the timer and resets the display to “00 : 00 : 00”.

Highlighted Source Code

				
					let [seconds, minutes, hours] = [0, 0, 0];
let displayTime = document.getElementById("displayTime");
let timer = null;

// Updates the time display every second
function stopwatch() {
    seconds++;
    if (seconds == 60) {
        seconds = 0;
        minutes++;
        if (minutes == 60) {
            minutes = 0;
            hours++;
        }
    }
    let h = hours &lt; 10 ? &quot;0&quot; + hours : hours;
    let m = minutes &lt; 10 ? &quot;0&quot; + minutes : minutes;
    let s = seconds &lt; 10 ? &quot;0&quot; + seconds : seconds;
    displayTime.innerHTML = `${h} : ${m} : ${s}`;
}

// Starts the stopwatch
function watchStart() {
    if (timer != null) {
        clearInterval(timer);
    }
    timer = setInterval(stopwatch, 1000);
}

// Stops the stopwatch
function watchStop() {
    clearInterval(timer);
}

// Resets the stopwatch to zero
function watchReset() {
    clearInterval(timer);
    [seconds, minutes, hours] = [0, 0, 0];
    displayTime.innerHTML = &quot;00 : 00 : 00&quot;;
}