Javascript/jQuery Countdown Timer with Update Capability

[steveclynn]

I’ve seen several examples for JavaScript/jQuery countdown timers. I have implemented a 15 minute countdown timer based off the example at w3schools. However, I would like to add an update feature that allows me to add/subtract time to and from the clock. The timer starts at 15 minutes.

In my project the user will answers questions. After they answer the question and select submit, a time penalty or bonus is given. The penalty subtracts 3 seconds from the clock. The bonus adds 2 seconds to it. Below is an example of my code:

var mission_timer = 15;

function start_timer(){
        
        countDownDate  = new Date().getTime() + mission_timer * 60 * 1000;
        timer_interval = setInterval(function() {

            var now                   = new Date().getTime();
            var distance              = countDownDate - now;
            var minutes               = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var minutes_number_length = Number(String(minutes).length);
            var seconds               = Math.floor((distance % (1000 * 60)) / 1000);
            var seconds_number_length = Number(String(seconds).length);
            
            current_time = document.getElementById("game_timer").innerHTML = "TIME: " + minutes + ":" + seconds;
            update_timer = null;
            time_update  = 0;
            
            if (current_time === "TIME: 00:00") {
                $("#game_timer").css("color", "red");
                clearInterval(timer_interval);
                console.log("Time Expired");
            }else
            if (current_time === "TIME: 01:00") {
                $("#game_timer").css("color", "yellow");
                console.log("One Minute Left");
            }
        
        }, 1000);
    }

[skamat]

What is mission_timer here? And why is it multiplied by 1000?

One way would be to add a pair of + and - buttons to the timer, one each for both minutes and seconds. The minutes + button should add a minute to current_time every time it is clicked. The seconds + should add a second to current_time every time it is clicked. And similarly, the - buttons should subtract a minute or a sec from current_time.

[steveclynn]

I my question to provide more detail and updated the code to define mission_timer:

var mission_timer = 15;

It represents the value I want to start the countdown from. In this case 15 minutes. the value 15 is multiplied by 60, then 1000 to get the total milliseconds in 15 minutes.

I created a game where you answer questions. After you answer the question and select submit you get a time penalty or bonus. The penalty subtracts 3 seconds from the clock. The bonus adds 2 seconds to it.

[skamat]

Ok so then you have already captured the time in current_time here:

So, you just need to add or subtract to it looks like. And then update the HTML part. I think you can put all that code for the same in a function and then execute it each time there is a penalty or bonus.