added functionality of Count Down Timer

This commit is contained in:
2024-02-24 18:11:08 -07:00
parent 4367c527a2
commit 4cf8f309f1
2 changed files with 42 additions and 25 deletions

View File

@ -0,0 +1,92 @@
import { useEffect, useState } from "react";
const CountDownTimer = ({ dateFinished, messageDisplayAfter }) => {
const [days, hours, minutes, seconds] = useCountdown(dateFinished);
if (days + hours + minutes + seconds <= 0) {
return (
<div>
{ShowCounter(days, hours, minutes, seconds)}
<p>{messageDisplayAfter}</p>
</div>
);
} else {
return (
<ShowCounter
days={days}
hours={hours}
minutes={minutes}
seconds={seconds}
/>
);
}
};
const useCountdown = (DateDone) => {
const countDownDate = new Date(DateDone).getTime();
const [countDown, setCountDown] = useState(
countDownDate - new Date().getTime()
);
useEffect(() => {
const interval = setInterval(() => {
setCountDown(countDownDate - new Date().getTime());
}, 1000);
return () => clearInterval(interval);
}, [countDownDate]);
return getReturnValues(countDown);
};
const getReturnValues = (countDown) => {
const days = Math.floor(countDown / (1000 * 60 * 60 * 24));
const hours = Math.floor(
(countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((countDown % (1000 * 60)) / 1000);
return [days, hours, minutes, seconds];
};
const ShowCounter = ({ days, hours, minutes, seconds }) => {
let danger = days <= 3;
return (
<div>
<DateTimeDisplay
valueAwayFrom={days}
discriptor={"Days"}
isInDanger={danger}
/>
<p>:</p>
<DateTimeDisplay
valueAwayFrom={hours}
discriptor={"Hours"}
isInDanger={false}
/>
<p>:</p>
<DateTimeDisplay
valueAwayFrom={minutes}
discriptor={"Mins"}
isInDanger={false}
/>
<p>:</p>
<DateTimeDisplay
valueAwayFrom={seconds}
discriptor={"Seconds"}
isInDanger={false}
/>
</div>
);
};
const DateTimeDisplay = ({ valueAwayFrom, discriptor, isInDanger }) => {
return (
<div className={isInDanger ? "countdown danger" : "countdown"}>
<p>{valueAwayFrom}</p>
<span>{discriptor}</span>
</div>
);
};
export default CountDownTimer;