Przejdź do głównej zawartości

26. Countdown — odliczanie do dat

Aplikacja do tworzenia odliczaczy (countdown timers) do ważnych dat — urodziny, egzaminy, wakacje, nowy rok.

function useCountdown(targetDate) {
const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(targetDate));
useEffect(() => {
const interval = setInterval(() => {
setTimeLeft(calculateTimeLeft(targetDate));
}, 1000);
return () => clearInterval(interval);
}, [targetDate]);
return timeLeft;
}
function calculateTimeLeft(targetDate) {
const diff = new Date(targetDate) - new Date();
if (diff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0, passed: true };
return {
days: Math.floor(diff / (1000 * 60 * 60 * 24)),
hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
seconds: Math.floor((diff % (1000 * 60)) / 1000),
passed: false,
};
}
  • Tworzenie odliczacza z nazwą i datą
  • Wyświetlenie dni, godzin, minut i sekund
  • Lista wielu odliczaczy
  • Zapis w localStorage
  • Obsługa minionych dat
Ocena: 3.0

Powodzenia!

Countdown to prosty projekt z dużym potencjałem wizualnym. Animacja cyfrowa “flip clock” (cyfry obracają się jak na starych tablicach wyników) to efekt WOW — możesz ją zrobić przez CSS perspective i rotateX. Zacznij od prostego wyświetlenia liczb, animacje dodaj później!