I have to refresh the page for the countdown timer to work

August 1, 2022

I created a small countdown timer with the following code:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Countdown</title>
</head>
<body>
    <h1>Special Day Countdown</h1>
    <div class="timer">
        <div id="hour" class="hour">
            <h2 id="hours"></h2>
            <h4>Hour</h4>
        </div>

        <div id="minute" class="minute">
            <h2 id="minutes"></h2>
            <h4>Minute</h4>
        </div>

        <div id="second" class="second">
            <h2 id="seconds"></h2>
            <h4>Second</h4>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

JavaScript

const hours = document.querySelector('#hours');
const minutes = document.querySelector('#minutes');
const seconds = document.querySelector('#seconds');

const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;

const currentTime = new Date;
const birthdayTime = new Date("Aug 02 2022 00:00:00");
let specialTime = birthdayTime.getTime() - currentTime.getTime();

const setTime = () => {
    const specialHour = Math.floor((specialTime % day) / hour);
    const specialMinute = Math.floor((specialTime % hour) / minute);
    const specialSecond = Math.floor((specialTime % minute) / second);

    hours.innerText = specialHour;
    minutes.innerText = specialMinute;
    seconds.innerText = specialSecond;

    console.log(specialTime);
}

setInterval(setTime, 1000);

But I have to refresh the page every time for countdown timer to work. In console, output is showing fine. Why is it not updating on its own in the HTML ?

>Solution :

Because you don’t renew a Date object, so the date just uses old time.

const hours = document.querySelector("#hours");
const minutes = document.querySelector("#minutes");
const seconds = document.querySelector("#seconds");

const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;

const birthdayTime = new Date("Aug 02 2022 00:00:00");

const setTime = () => {
  const currentTime = new Date; // Move to here.
  let specialTime = birthdayTime.getTime() - currentTime.getTime(); // And this.
  const specialHour = Math.floor((specialTime % day) / hour);
  const specialMinute = Math.floor((specialTime % hour) / minute);
  const specialSecond = Math.floor((specialTime % minute) / second);

  hours.innerText = specialHour;
  minutes.innerText = specialMinute;
  seconds.innerText = specialSecond;

  console.log(specialTime);
};

setInterval(setTime, 1000);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Countdown</title>
</head>
<body>
    <h1>Special Day Countdown</h1>
    <div class="timer">
        <div id="hour" class="hour">
            <h2 id="hours"></h2>
            <h4>Hour</h4>
        </div>

        <div id="minute" class="minute">
            <h2 id="minutes"></h2>
            <h4>Minute</h4>
        </div>

        <div id="second" class="second">
            <h2 id="seconds"></h2>
            <h4>Second</h4>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>