Countdown timer

[ghost]

What would you like or expect to see?

A nice UI for making a timer in the header for example.

Select somewhere that I want a timer, then select the specified time to countdown.

ALSO:
Option: when the timer comes to the end - automatically submit/end the task/form/whatever, when the timer comes to 0!

What is currently happening?

No timer.

Please describe the steps needed to reproduce this phenomenon

<h3 class="text-center">Čas za reševanje: </h3>
<p class="text-center" id="timer-form">01:00</p>

// Set the countdown time in milliseconds
var countdownTime = 60000; // 1 minute

// Initialize previous minutes and seconds
var prevMinutes = -1;
var prevSeconds = -1;

// Update the countdown every 1 second
var countdown = setInterval(function() {
    countdownTime -= 1000;
    var minutes = Math.floor((countdownTime % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((countdownTime % (1000 * 60)) / 1000);

    // Pad the minutes and seconds with leading zeros if they are less than 10.
    minutes = String(minutes).padStart(2, '0');
    seconds = String(seconds).padStart(2, '0');

    // Only update the display if the minutes or seconds have changed
    if (minutes !== prevMinutes || seconds !== prevSeconds) {
        document.getElementById("timer-form").innerHTML = minutes + ":" + seconds;
        prevMinutes = minutes;
        prevSeconds = seconds;
    }

    // If the countdown is finished, stop the timer 
    if (countdownTime <= 0) {
        clearInterval(countdown);
        document.getElementById("timer-form").innerHTML = "TIME'S UP";
    }
}, 1000);

Timer with the submit option for form:

var countdownTime = 9000; // 15 seconds

// Initialize previous minutes and seconds
var prevMinutes = -1;
var prevSeconds = -1;

// Update the countdown every 1 second
var countdown = setInterval(function() {
    countdownTime -= 1000;
    var minutes = Math.floor((countdownTime % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((countdownTime % (1000 * 60)) / 1000);

    // Pad the minutes and seconds with leading zeros if they are less than 10.
    minutes = String(minutes).padStart(2, '0');
    seconds = String(seconds).padStart(2, '0');

    // Only update the display if the minutes or seconds have changed
    if (minutes !== prevMinutes || seconds !== prevSeconds) {
        document.getElementById("timer-form").innerHTML = minutes + ":" + seconds;
        prevMinutes = minutes;
        prevSeconds = seconds;
    }

    // If the countdown is finished, stop the timer 
    if (countdownTime <= 0) {
        clearInterval(countdown);
        document.getElementById("timer-form").innerHTML = "00:00";
        
        // Get the submit button element
        var submitButton = document.querySelector('button[form="demography"]');
    
        // Trigger a click event on the submit button
        if (submitButton) {
            submitButton.click();
        }
    }
}, 1000);

Finally, please tell us which browser you're using (and the version thereof)

Latest Chrome

[mcfarla9]

Please note that setInterval() does not keep accurate time. As a result, simply decrementing the countdownTime will result in errors. This may not matter for short countdowns using a large delay interval. But for large countdowns, or short delay intervals, the error becomes significant (as we here learned the hard way!).

Instead, always, always, update your countdownTime or whatever based upon a current reading of the clock. E.g., instead of

const delayInterval = 1000;
// Set the countdown time in milliseconds
var countdownTime = 60000; // 1 minute

// Update the countdown every 1 second
var countdown = setInterval(function() {
    countdownTime -= delayInterval;
    // other stuff goes here ...
}, delayInterval);

do

const delayInterval = 1000;
// Set the countdown time in milliseconds
const tDone = performance.now() + 60000;  // 1 minute from now

// Update the countdown every 1 second (more or less)
var countdown = setInterval(function() {
    var countdownTime = tDone - performance.now();
    // other stuff goes here ...
}, delayInterval);