Make Countdown Timer 2 Digits For HH:MM:SS

Question

So, I am a novice in Javascript and I am wondering if someone can help me with this. I believe this question is really really easy for most. Well, this is a countdown timer with select options to set up the time. It is working well. The problem is that, when the countdown starts, I want the single digit numbers to show the number zero first. Basically, I want the numbers for HH:MM:SS to be 2 digits. For example, 00:01:59 and not 0:1:59. I believe it has something to do with padString or something (I could be wrong), but my proficiency is still no that advanced.

Note: I would highly appreciate it if we can come up with a Vanilla Javascript solution and not JQuery simply because I want to use this offline and without any online dependencies. Thank you in advance.

Javascript

<script>
  var hours = 0;
  var minutes = 0;
  var seconds = 0;
  var interval = null;

  document.getElementById('hours').addEventListener('change', e => {
    hours = +e.target.value;
  });

  document.getElementById('minutes').addEventListener('change', e => {
    minutes = +e.target.value;
  });

  document.getElementById('seconds').addEventListener('change', e => {
    seconds = +e.target.value;
  });

  document.getElementById('startTimer').addEventListener('click', () => {
    var timeInSeconds = (hours * 60 * 60) +
      (minutes * 60) +
      seconds;

    const audio = new Audio("audioURL.mp3");

    var displayTime = () => {
      var displayHours = Math.floor(timeInSeconds / (60 * 60));
      var remainder = timeInSeconds - (displayHours * 60 * 60);
      var displayMinutes = Math.floor(remainder / 60);
      var displaySeconds = remainder - (displayMinutes * 60);
      document.getElementById("timer").innerHTML = displayHours + ":" +
        displayMinutes + ":" + displaySeconds;
    };
    interval = setInterval(() => {
      displayTime();
      timeInSeconds -= 1;
      if (timeInSeconds < 0) {
        clearInterval(interval);
        audio.play();
      }
    }, 1000);
  });
</script>

Yes. This one too. This also answers my question. I really appreciate your kindness. I am relatively new not only in Javascript but also in Stackoverflow. I haven't searched thoroughly and did not see this. I will take my time to review the link you have given me and learn it. It's a pity that I didn't have any proper academic experience when it comes to coding so learning it is quite a challenge. But I recently find it very interesting, so I learn from examples that I see in Stackoverflow and other resources. The link is a great help. Thank you. — Peter Brown, Jan 19 '21 at 16:46

score 1 · Accepted Answer · answered Jan 19 '21 at 16:13

You could use ('0' + myValue).substr(-2) to fix the length with 2 characters. In this case '01' would be stay as '01' and '012' will be '12' because the -2 will cut the string from the end. Then your code will be:

  var hours = 00;
  var minutes = 00;
  var seconds = 00;
  var interval = null;

  document.getElementById('hours').addEventListener('change', e => {
    hours = +e.target.value;
  });

  document.getElementById('minutes').addEventListener('change', e => {
    minutes = +e.target.value;
  });

  document.getElementById('seconds').addEventListener('change', e => {
    seconds = +e.target.value;
  });

  document.getElementById('startTimer').addEventListener('click', () => {
    var timeInSeconds = (hours * 60 * 60) +
      (minutes * 60) +
      seconds;

    const audio = new Audio("audioURL.mp3");

    var displayTime = () => {
      var displayHours = Math.floor(timeInSeconds / (60 * 60));
      var remainder = timeInSeconds - (displayHours * 60 * 60);
      var displayMinutes = Math.floor(remainder / 60);
      var displaySeconds = remainder - (displayMinutes * 60);
      document.getElementById("timer").innerHTML = ('0' + displayHours).substr(-2) + ":" +
        ('0' + displayMinutes).substr(-2) + ":" + ('0' + displaySeconds).substr(-2);
    };
    interval = setInterval(() => {
      displayTime();
      timeInSeconds -= 1;
      if (timeInSeconds < 0) {
        clearInterval(interval);
        audio.play();
      }
    }, 1000);
  });

Make Countdown Timer 2 Digits For HH:MM:SS

1 Answers1