<div class="sale-date p-2"></div>
<div class="soon-date p-2 text-danger"></div>
<div class="past-date p-2 text-success"></div>
const countdownTimer = (targetDateString, elementSelector, endHTML) => {
  const targetDate = new Date(targetDateString);
  const el = document.querySelector(elementSelector);
  const oo = n => n.toString().padStart(2, '0');
  const updateCountDown = () => {
    let seconds = Math.floor((targetDate - new Date()) / 1000);
    if (seconds <= 0) {
      el.innerHTML = endHTML;
      return;
    }

    const days = Math.floor(seconds / 86400);
    seconds -= days * 86400;
    const hours = Math.floor(seconds / 3600);
    seconds -= hours * 3600;
    const minutes = Math.floor(seconds / 60);
    seconds -= minutes * 60;

    el.innerHTML = (days ? `${days} days` : '') + ' ' + [hours, minutes, seconds].map(oo).join(':');

    setTimeout(updateCountDown, 200);
  };

  updateCountDown();
};

countdownTimer('Jan 10, 2024 00:45:21', '.sale-date', 'Распродажа <strong>уже идёт!</strong>');
countdownTimer('Jan 10, 2023 12:00:00', '.soon-date', '10-е января, полдень, уже!');
countdownTimer('Jan 10, 2022 15:00:00', '.past-date', 'Всё в прошлом');

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.