JSFiddle - React, Tailwind, and code Playground

by rga4

HTML

<!DOCTYPE html>
<html>
<body>
    <button id="startPauseBtn">Start</button>
    <button id="resetBtn">Reset</button>
    <p id="timer">0</p>
</body>
</html>

JavaScript

let count = 0;
let intervalId = null;

const timerElement = document.getElementById('timer');
const startPauseBtn = document.getElementById('startPauseBtn');
const resetBtn = document.getElementById('resetBtn');

startPauseBtn.addEventListener('click', function() {
    if (intervalId) {
        clearInterval(intervalId);
        intervalId = null;
        startPauseBtn.innerText = 'Start';
    } else {
        intervalId = setInterval(function() {
            count++;
            timerElement.innerText = `${(count / 60).toFixed(2)} minutes (${(count / 3600).toFixed(2)} hours)`;
        }, 1000);
        startPauseBtn.innerText = 'Pause';
    }
});

resetBtn.addEventListener('click', function() {
    clearInterval(intervalId);
    intervalId = null;
    count = 0;
    timerElement.innerText = count;
    startPauseBtn.innerText = 'Start';
});