JSFiddle - React, Tailwind, and code Playground

by Patrick Ludewig

HTML

<div class="alert is-margin-b-24">
  <div class="alert__headline">CASTING</div>
  <div class="alert__content-wrapper">
    <div class="alert__text">Wir suchen DICH 🫵🏻</div>
  </div>
  <div class="alert__button-wrapper">
    <a href="/mitwesen-werden" class="alert__button w-inline-block"
      ><div>Jetzt bewerben</div>
     </a
    ><link rel="prefetch" href="/mitwesen-werden" />
  </div>
  <div class="alert__date">
    <div>Nur noch</div>
    <div id="alert__date-days-number">-13:-19h</div>
    <div id="alert__date-days">h</div>
    <div>!</div>
  </div>
</div>

JavaScript

// Get the current date
let today = new Date();
today = new Date(today);

// Set the target date to October 2nd at 11:59 PM CET in Vienna timezone
let targetDate = new Date('2024-10-03T13:59:00+02:00');
targetDate = new Date(targetDate);

// Calculate the time difference in milliseconds
let timeDifference = targetDate - today;

// Convert the time difference from milliseconds to days
let daysLeft = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
document.getElementById('alert__date-days-number').textContent = `${daysLeft}`;

let hoursLeft = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutesLeft = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
console.log(today);
console.log(daysLeft, hoursLeft, minutesLeft);

if (daysLeft < 0) {
    document.getElementById('alert__date-days-number').textContent = '0';
    document.getElementById('alert__date-days').textContent = 'Days';
} else if (daysLeft < 3) {
    document.getElementById('alert__date-days-number').textContent = `${hoursLeft}:${minutesLeft}`;
    document.getElementById('alert__date-days').textContent = 'h';
} else if (daysLeft <= 2) {
    document.getElementById('alert__date-days').textContent = 'Tage';
} else {
    document.getElementById('alert__date-days-number').textContent = `${daysLeft}`;
}