Event Item Header 3
<script> (function () { const second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24; // Set the target date and time for the countdown (format: "MM/DD/YYYY HH:mm:ss") const targetDateString = "06/16/2024 09:54:00"; const targetDate = new Date(targetDateString).getTime(); const updateCountdown = () => { const now = new Date().getTime(), // Get the current date and time distance = targetDate - now; // Calculate the time remaining until the target date // Update the HTML elements with the remaining time document.getElementById('days').innerText = Math.floor(distance / day); document.getElementById('hours').innerText = Math.floor((distance % day) / hour); document.getElementById('minutes').innerText = Math.floor((distance % hour) / minute); document.getElementById('seconds').innerText = Math.floor((distance % minute) / second); // Check if the target date has already passed if (distance < 0) { clearInterval(interval); // Stop the countdown timer document.getElementById('days').innerText = '0'; document.getElementById('hours').innerText = '0'; document.getElementById('minutes').innerText = '0'; document.getElementById('seconds').innerText = '0'; // You can display an element at the end of the countdown with this ID document.getElementById('message').style.display = 'block'; } }; // Initial call to update countdown updateCountdown(); // Update the countdown every second const interval = setInterval(updateCountdown, 1000); })(); </script>
I have accomplished the following. This is my solution. You just need to set the CMS variables to differentiate the data.