Hey there, I'm encountering an issue with the countdown component on my Next.js website using daisyUI. When the number of days exceeds 99, it's not rendering correctly as shown below:
https://i.sstatic.net/cWR2tSEg.png https://i.sstatic.net/V0Ivuoqt.png
Initially, I have a straightforward countdown setup:
const targetDate = new Date('2024-09-01T07:00:00');
const [timeLeft, setTimeLeft] = useState({
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
});
useEffect(() => {
const updateCountdown = () => {
const currentTime = new Date();
const difference = targetDate - currentTime;
if (difference < 0) {
clearInterval(intervalId);
setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
} else {
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
setTimeLeft({ days, hours, minutes, seconds });
}
};
const intervalId = setInterval(updateCountdown, 1000);
return () => clearInterval(intervalId);
}, [targetDate]);
This is how I display the countdown:
<div className="grid grid-flow-col gap-5 text-center auto-cols-max">
<div className="flex flex-col" style={{ marginBottom: '10px' }}>
<span className="countdown font-mono text-5xl text-black">
<span style={{ "--value": String(timeLeft.days).padStart(3, '0') }}>{String(timeLeft.days).padStart(3, '0')}</span>
</span>
days
</div>
<div className="flex flex-col">
<span className="countdown font-mono text-5xl text-black">
<span style={{ "--value": String(timeLeft.hours).padStart(2, '0') }}>{String(timeLeft.hours).padStart(2, '0')}</span>
</span>
hours
</div>
<div className="flex flex-col">
<span className="countdown font-mono text-5xl text-black">
<span style={{ "--value": String(timeLeft.minutes).padStart(2, '0') }}>{String(timeLeft.minutes).padStart(2, '0')}</span>
</span>
min
</div>
<div className="flex flex-col">
<span className="countdown font-mono text-5xl text-black">
<span style={{ "--value": String(timeLeft.seconds).padStart(2, '0') }}>{String(timeLeft.seconds).padStart(2, '0')}</span>
</span>
sec
</div>
</div>
I've attempted to fix this by adding:
String(timeLeft.seconds).padStart(3,'0')
But unfortunately, it hasn't resolved the issue. Any suggestions on how to tackle this problem?