remove the 0's in count down timer

Question

I have created a countdown timer that counts down from 10:00, I want the countdown timer to remove the first 0 once it gets below 1 minute. and include the ending zero once its below 10 seconds.

For Example: "0:59" I want to remove the 0 so it should show ":59" and then ":9" should show ":09"

To be 100 percent honest, I have not tried much.. I thought that maybe this could be done with a regular expression, but I am unsure how.

My Timer:

const mins = 10;
// getting the exact time as of the page load
const now = new Date().getTime();
// the math that is done for the actual countdown. So 10*60*1000 + the time retrieved from the page load.
const deadline = mins * 60 * 1000 + now;

// This is a function, however it is a JavaScript method and calls a function.
setInterval(() => {
  // Gets the current time
  var currentTime = new Date().getTime();
  //   gets the 'distance' between the deadline(10 mins) and the current time
  var distance = deadline - currentTime;
  //   found out this method does the math for you, I had to look this up and research it on W3schools
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  // Inserts the timer into the Span timer
  timeSpan.innerHTML = minutes + ':' + seconds;
  //   the interval is set to 1 sec, so the timer refreshes and counts down every second

  if (seconds < 0) {
    confirm('Alert For your User!');
    window.location.reload();
  }
}, 1000);

I haven't added anything in the way of starting, because I am unsure where to start! any help would be great.

Answer 1

Answer:

You can use simple if statements to alter the output right before it goes to the screen.

  // check if seconds is single digit
  if(seconds.toString().length === 1) { seconds = "0" + seconds }
  // check if minutes is zero ( which is falsy )
  if(!minutes) minutes = "";
  // Inserts the timer into the Span timer
  timeSpan.innerHTML = minutes + ':' + seconds;

---

You also can declare a variable to hold a reference to the interval

// declare the interval as a variable so you can clear it!
let my_interval = setInterval(() => {

This allows you to clear it when it is no longer needed to run:

if (seconds < 0) {
    confirm('Alert For your User!');
    //clear the interval when it finishes!
    clearInterval(my_interval);
  }
}, 1000);

---

Code Snippet:

let timeSpan = document.querySelector("#timeSpan");
const mins = 1;
// getting the exact time as of the page load
const now = new Date().getTime();
// the math that is done for the actual countdown. So 10*60*1000 + the time retrieved from the page load.
const deadline = mins * 60 * 1000 + now;

// This is a function, however it is a JavaScript method and calls a function.

// declare the interval as a variable so you can clear it!
let my_interval = setInterval(() => {
  // Gets the current time
  var currentTime = new Date().getTime();
  //   gets the 'distance' between the deadline(10 mins) and the current time
  var distance = deadline - currentTime;
  //   found out this method does the math for you, I had to look this up and research it on W3schools
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  
  // check if seconds is single digit
  if(seconds.toString().length === 1) { seconds = "0" + seconds }
  // check if minutes is zero ( which is falsy )
  if(!minutes) minutes = "";
  // Inserts the timer into the Span timer
  timeSpan.innerHTML = minutes + ':' + seconds;
  
  //   the interval is set to 1 sec, so the timer refreshes and counts down every second

  if (seconds < 0) {
    confirm('Alert For your User!');
    //clear the interval when it finishes!
    clearInterval(my_interval);
  }
}, 1000);