A unique surprise is in store for my wife with this special website. The home page features a countdown to a significant date, and only one button unlocks the gift. I am looking for a way to either keep the button locked until the countdown ends or have it lead to a teasing page saying "oh no you don't" before revealing the actual prize when the timer hits zero. It might sound confusing π but any help on making this happen would be greatly appreciated.
For easier debugging and previewing, here is the link to my CodePen: https://codepen.io/Probler/pen/KKLJxqO
const targetDate = new Date('July 15, 2024 00:00:00');
function updateCountdown() {
const now = new Date();
const remainingTime = targetDate - now;
if (remainingTime <= 0) {
// If the countdown is finished, display all zeros
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
clearInterval(interval); // Stop the countdown
return;
}
// Calculate the time parts
const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
// Display the time parts in the corresponding span elements
document.getElementById('days').textContent = days.toString().padStart(2, '0');
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
}
// Update the countdown every second
const interval = setInterval(updateCountdown, 1000);
// Initial call to display the countdown immediately
updateCountdown();