Wordpress Update Javascript Stopwatch

Question

I have this javascript stopwatch that is working. The function is when user click start button to start and pause button to pause the stopwatch. The variable stopwatch is saved in localStorage and when user refresh the website and click start again the stopwatch continue from the last stopwatch time + 1; The first timer is working, but I will have an array of the same containers, fetching from a Database containing stopwatch time. The problem is with my loop. How can I add the timer for each individual timer container and continue from the time it was last saved + 1 and continue from there. I am providing an example maybe someone can help me.

HTML


    Time Tracker
    
    
    
    00:34:21



    Time Tracker
    
    
    
    21:56:22



    Time Tracker
    
    
    
    32:47:35



    Time Tracker
    
    
    
    11:29:03



    Time Tracker
    
    
    
    04:01:14

JS

    let showTime = document.querySelector(".output");
    let startTimeButton = document.querySelector(".start")
    let pauseTimeButton = document.querySelector(".pause")

    let seconds = 0;
    let interval = null;
    if (localStorage.getItem("stopwatchSeconds") != null) {
        seconds = parseInt(localStorage.getItem("stopwatchSeconds"));
    }

    const timer = () => {
        seconds++;

        localStorage.setItem("stopwatchSeconds", seconds);


        // Get hours
        let hours = Math.floor(seconds / 3600);
        // Get minutes
        let minutes = Math.floor((seconds - hours * 3600) / 60);
        // Get seconds
        let secs = Math.floor(seconds % 60);

        if (hours < 10) {
            hours = `0${hours}`;
        }
        if (minutes < 10) {
            minutes = `0${minutes}`;
        }
        if (secs < 10) {
            secs = `0${secs}`;
        }

        showTime.innerHTML = `${hours}:${minutes}:${secs}`;

    };

    startTimeButton.addEventListener("click", () => {
        pauseTimeButton.style.display = "block";
        startTimeButton.style.display = "none";
        console.log("START TIME CLICKED");

        if (interval) {
            return;
        }

        interval = setInterval(timer, 1000);
    });

    // Pause function
    pauseTimeButton.addEventListener("click", () => {
        pauseTimeButton.style.display = "none";
        startTimeButton.style.display = "block";
        console.log("PAUSE TIME CLICKED");
        clearInterval(interval);
        interval = null;

    });

user_19239814 · Answer

You can try this snippet

Html


  Time Tracker 01
  
  
  
  



  Time Tracker 02

Vanilla JS

let stop_watch_containers = document.querySelectorAll(".c-add-task-main-container");

stop_watch_containers.forEach((container) => {

    let start_button = container.querySelector(".start");
    let pause_button = container.querySelector(".pause");
    let clear_button = container.querySelector(".clear");
    let output = container.querySelector(".output");
    let localStorageKey = "watch" + container.dataset.watch_no;
    let seconds = localStorage.getItem(localStorageKey);

    if (isNaN(seconds)) {
        seconds = 0;
    }

    // set old time on page load
    output.innerHTML = timer();

    let interval;

    // start watch
    start_button.addEventListener("click", function () {
        clearInterval(interval);
        interval = setInterval(function () {
        output.innerHTML = timer();
        seconds++;
        }, 1000);
    });

    // pause watch
    pause_button.addEventListener("click", function () {
        clearInterval(interval);
        localStorage.setItem(localStorageKey, seconds);
    });

    // clear watch
    clear_button.addEventListener("click", function () {
        clearInterval(interval);
        seconds = 0;
        output.innerHTML = timer();
        localStorage.setItem(localStorageKey, 0);
    });

    function timer() {
        let hours = Math.floor(seconds / 3600);
        // Get minutes
        let minutes = Math.floor((seconds - hours * 3600) / 60);
        // Get seconds
        let secs = Math.floor(seconds % 60);

        if (hours < 10) {
        hours = `0${hours}`;
        }
        if (minutes < 10) {
        minutes = `0${minutes}`;
        }
        if (secs < 10) {
        secs = `0${secs}`;
        }
        return `${hours}:${minutes}:${secs}`;
    }
});

user_4082344 · Answer

Save the interval and timer in array let seconds = [] and I simplified your code, Start and Pause button are merged, if (time < 10) change with .padStart()

run on jsFiddle

let startTimeButtons = document.querySelectorAll(".start")

let seconds = [0, 0];
let interval = [];
if (localStorage.getItem("stopwatchSeconds") != null) {
  seconds = JSON.parse(localStorage.getItem("stopwatchSeconds"));
  seconds = seconds.map(n => parseInt(n))
}

const timer = (el, i) => {
  seconds[i]++;
  localStorage.setItem("stopwatchSeconds", JSON.stringify(seconds));
  // Get hours
  let hours = Math.floor(seconds[i] / 3600).toString().padStart(2, 0);
  // Get minutes
  let minutes = Math.floor((seconds[i] - hours * 3600) / 60).toString().padStart(2, 0);
  // Get seconds
  let secs = Math.floor(seconds[i] % 60).toString().padStart(2, 0);

  el.parentElement.querySelector('.output').innerHTML = `${hours}:${minutes}:${secs}`;

};

startTimeButtons.forEach((btn, index) => {
  timer(btn, index); // update time on page load
  btn.addEventListener("click", () => {
    if (btn.textContent == 'Start') {
      btn.textContent = 'Pause';
      interval[index] = setInterval(timer, 1000, btn, index);
    } else {
      btn.textContent = 'Start';
      clearInterval(interval[index]);
    }
  });
})


    Time Tracker
    
    
    00:00:00



    Time Tracker
    
    
    00:00:00

Wordpress Update Javascript Stopwatch

2 Answers