How to change timer into a countdown timer for the Memory game

Question

I have a code for a Memory game with images. I took the reference for the game from this link:

In this code , the game has a clock/ timer. I would like to make this timer into a clock down timer setting a limit of 10 mins. I dont know how to change this timer into clock down time. Can someone help me out with this problem.

// @description game timer
var second = 0,
  minute = 20;
hour = 0;
var timer = document.querySelector(".timer");
var interval;

function startTimer() {
  interval = setInterval(function() {
    timer.innerHTML = minute + "mins " + second + "secs";
    second++;
    if (second == 60) {
      minute++;
      second = 0;
    }
    if (minute == 60) {
      hour++;
      minute = 0;
    }
  }, 1000);
}

//reset timer
second = 0;
minute = 20;
hour = 0;
var timer = document.querySelector(".timer");
timer.innerHTML = "20 mins 0 secs";
clearInterval(interval);


startTimer();

<div class="timer">
</div>

Can someone show me how to change this normal timer into a countdown timer and help me out of this problem.

Not the only issue with your code, but I guess the last line is supposed to be startTimer(); instead? — Chris G
@ChrisG i have edited the code. The timer works perfect . but i want to change the timer into a countdown timer. — Joskaa

Riddhijain Riddhijain · Accepted Answer · 2020-07-30T17:32:11

Try this one.

var second = 0,
  minute = 20;
hour = 0;
var timer = document.querySelector(".timer");
var interval;

function startTimer() {
  interval = setInterval(function() {
    timer.innerHTML = hour + " hr " + minute + " mins " + second + " secs";
    if (second == 0) {

      if (minute == 0) {
        hour--;
        minute = 60
      }
      minute--;
      second = 60
    }

    second--;
  }, 1000);
}

//reset timer
second = 0;
minute = 20;
hour = 0;
var timer = document.querySelector(".timer");
timer.innerHTML = "0 hr 20 mins 0 secs";
clearInterval(interval);
startTimer()

<html>

<body>
  <div class="timer"></div>
</body>

</html>

How to change timer into a countdown timer for the Memory game

1 Answers