Script for the mini stopwatch app using the WordPress block editor

stopwatch-script.js

// Stopwatch class
class Stopwatch {
    constructor(displayCallback) {
        this.startTime = null;
        this.elapsedTime = 0;
        this.timerInterval = null;
        this.displayCallback = displayCallback; // Function to update the display
    }

    // Starts or resumes the stopwatch from 0
    start() {
        if (!this.startTime || this.elapsedTime === 0) {
            this.startTime = Date.now() - this.elapsedTime;
            this.update();
        } else {
            this.resume();
        }
    }

    // Resumes the stopwatch from its current state
    resume() {
        if (!this.timerInterval && this.elapsedTime !== 0) {
            this.startTime = Date.now() - this.elapsedTime;
            this.update();
        }
    }

    // Pauses the stopwatch
    pause() {
        if (this.timerInterval) {
            clearInterval(this.timerInterval);
            this.timerInterval = null;
        }
    }

    // Stops the stopwatch and resets the elapsed time
    stop() {
        this.pause(); // Reuse the pause functionality to stop the timer
        this.elapsedTime = 0;
        this.displayTime();
    }

    // Internal method to update the timer display
    update() {
        this.timerInterval = setInterval(() => {
            this.elapsedTime = Date.now() - this.startTime;
            this.displayTime();
        }, 10); // Update the time every 10ms for a smooth display
    }

    // Internal method to handle the display update
    displayTime() {
        if (this.displayCallback) {
            this.displayCallback(this.getTime());
        }
    }

    // Returns the elapsed time in an object { hours, minutes, seconds, milliseconds }
    getTime() {
        let totalMilliseconds = this.elapsedTime;
        const hours = Math.floor(totalMilliseconds / (1000 * 60 * 60));
        totalMilliseconds -= hours * 1000 * 60 * 60;
        const minutes = Math.floor(totalMilliseconds / (1000 * 60));
        totalMilliseconds -= minutes * 1000 * 60;
        const seconds = Math.floor(totalMilliseconds / 1000);
        const milliseconds = totalMilliseconds % 1000;

        return {
            hours,
            minutes,
            seconds,
            milliseconds,
        };
    }
}


// To use the stopwatch, you would call the methods start, pause, stop, and use the getTime method to get the current time. The `updateDisplay` function is a callback to update your stopwatch display in the UI.

// Select the stopwatch elements
const stopwatchTimeEl = document.querySelector('.stopwatch__time');
const stopwatchStartButtonEl = document.querySelector('.stopwatch__button--start');
const stopwatchStopButtonEl = document.querySelector('.stopwatch__button--stop');
const stopwatchResetButtonEl = document.querySelector('.stopwatch__button--reset');

const updateDisplay = (time) => {
    stopwatchTimeEl.textContent = `${time.hours.toString().padStart(2, '0')}:${time.minutes.toString().padStart(2, '0')}:${time.seconds.toString().padStart(2, '0')}.${time.milliseconds.toString().padStart(3, '0')}`;
};

const stopwatch = new Stopwatch(updateDisplay);

stopwatchStartButtonEl.addEventListener('click', () => {
    stopwatch.start();
});

stopwatchStopButtonEl.addEventListener('click', () => {
    stopwatch.pause();
});

stopwatchResetButtonEl.addEventListener('click', () => {
    stopwatch.stop();
});