Countdown timer is not displaying correctly when number is less than 10

Hello, I am adding a countdown timer to a wedding site, and the code I’m using outputs 0${num} when the number hits below 10. I can’t find the issue as I’ve looked at other sites using the exact same code that doesn’t have this problem. Here us the code I’m using.

<h1 id="countdown-title">We'll see you all soon!</h1>
    <div class="countdown">
      <div class="box">
     <span class="num" id="day-box">00</span>
     <span class="text">Days</span>
    </div>
    <div class="box">
      <span class="num" id="hr-box">00</span>
      <span class="text">Hours</span>
    </div>
    <div class="box">
      <span class="num" id="min-box">00</span>
      <span class="text">Minutes</span>
    </div>
    <div class="box">
      <span class="num" id="sec-box">00</span>
      <span class="text">Seconds</span>
    </div>
    </div>
    <script type="text/Javascript" src="script.js"></script>
let dayBox = document.getElementById("day-box");
let hrBox = document.getElementById("hr-box");
let minBox = document.getElementById("min-box");
let secBox = document.getElementById("sec-box");

//Format: Date(year, month, day, hour, minute)
//Year is counter from 0 to 11
let endDate = new Date(2023, 8, 19, 3, 0);
//Output value in milliseconds
let endTime = endDate.getTime();

function countdown() {
  let todayDate = new Date();
  let todayTime = todayDate.getTime();
  let remainingTime = endTime - todayTime;
  let oneMin = 60 * 1000;
  let oneHr = 60 * oneMin;
  let oneDay = 24 * oneHr;
  let addZeroes = (num) => (num < 10 ? '0${num}' : num);
  if (endTime < todayTime) {
    clearInterval(i);
    document.querySelector("countdown").innerHTML = "<h1>Congratulations!</h1>";
  } else {
    let daysLeft = Math.floor(remainingTime / oneDay);
    let hrsLeft = Math.floor((remainingTime % oneDay) / oneHr);
    let minsLeft = Math.floor((remainingTime % oneHr) / oneMin);
    let secsLeft = Math.floor((remainingTime % oneMin) / 1000);
    dayBox.textContent = addZeroes(daysLeft);
    hrBox.textContent = addZeroes(hrsLeft);
    minBox.textContent = addZeroes(minsLeft);
    secBox.textContent = addZeroes(secsLeft);
  }
}

let i = setInterval(countdown, 1000);
countdown();

You sure those should be single quotes?

I’ve tried both single and double quotes and it didn’t fix the issues.

Sorry, I was trying to give you a hint without giving you the answer. Neither single or double quotes will work the way you want because you need to use back ticks for template literals.

1 Like

I can’t believe I forgot that! I was following a youtube guide for this one and I’m now realizing the font he used just made his backticks look like single quotes. Thank you!

Understood. The difference between a backtick and a single quote in some fonts is not that big.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.